zoukankan      html  css  js  c++  java
  • AngularJS

    原文: https://thinkster.io/egghead/index-event-log

    --------------------------------------------------------------

    $index is a way to show which iteration of a loop you’re in. If we set up an ng-repeat to repeat over the letters in ‘somewords’, like so:

    <div ng-app="app">
      <div ng-repeat="item in 'somewords'.split('')">
        {{$index + 1}}. {{item}}
      </div>
    </div>
    

    We can see that we get a listing of all the characters in ‘somewords’ with the index next to it.

    Now, let’s add an ng-click attribute to the div as “ev = $event” and a binding to ev.pageX. Let’s also set this div’s class to “button” since we’re going to be clicking on it

    <div ng-app="app">
      <div
        class="button"
        ng-repeat="item in 'somewords'.split('')"
        ng-click="ev = $event"
        >
        {{$index + 1}}. {{item}}
        {{ev.pageX}}
      </div>
    </div>
    

    Now we can click on all of these buttons and whenever we click we get the extra number next to our index and character. This is the x value of where we’re clicking, and this shows that we can access the event that’s happening through $event.

    If we want to log this event, we can do so by using $log. In order to use $log without setting up a controller, we can put it on the root scope of our application. We need to set up the run phase of our application and inject $rootScope and $log in order to expose $log to $rootScope

    var app = angular.module("app", []);
    
    app.run(function($rootScope, $log){
      $rootScope.$log = $log;
    });
    

    Now we’re able to access the $log function anywhere within our app. (Note that you rarely want to put anything on the $rootScope as anything on the $rootScope will be available throughout the app.) Let’s change the ng-click attribute to “$log.debug($event)”

    <div ng-app="app">
      <div
        class="button"
        ng-repeat="item in 'somewords'.split('')"
        ng-click="$log.debug($event)"
        >
        {{$index + 1}}. {{item}}
        {{ev.pageX}}
      </div>
    </div>
    

    Now we can open up our console and click on any of the buttons and we’ll see that the MouseEvent is being logged to the console. You can turn off the debug level of the logger in the config phase of the app by using $logProvider and calling debugEnabled and passing it false.

    var app = angular.module("app", []);
    
    app.config(function($logProvider){
      $logProvider.debugEnabled(false);
    });
    
    app.run(function($rootScope, $log){
      $rootScope.$log = $log;
    });
    

    Be sure to use proper logging levels in order for debugEnabled to work, as any info or warnings will still be logged

  • 相关阅读:
    Relativity 01: Physical Meaning of Geometrical Propositions
    Algo 2: Asymptotic Order of Growth
    CShop Project : BeanUtils工具的使用
    137 __getattribute__
    134 isinstance和issubclass
    135 反射(hasattr和getattr和setattr和delattr)
    133 面向对象进阶实战之选课系统
    132 面向对象进阶小结
    131 类和对象的绑定方法及非绑定方法
    130 类的property特性
  • 原文地址:https://www.cnblogs.com/oxspirt/p/6525237.html
Copyright © 2011-2022 走看看