angularjs指令--指令创建

[msforest]

指令（Directives）是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令，但还是经常需要创建应用特定的指令。

自定义指令

指令可以有四种表现形式，分别为元素(element)、属性(attribute)、注释(comment)、样式类(class)，正好代表ECMAScript的前四个字母，还是很好记的。基本样式如下：

var app = angular.module('myapp', []);

app.directive('helloWorld', function() {
  return {
      restrict: 'ECMA',
      replace: true,
      transclude: true,
      template: '<div>Hello World!!</div>'
      //templateUrl: 'hello.html'
  };
});

使用app.directive()方法在模块中注册一个新的指令，第一个参数是指令的名称，第二个参数是返回指令定义对象的函数；如果你的指令依赖于其他的对象或者服务，比如 $rootScope, $http, 或者$compile，他们可以在这个时间被注入。 页面使用形式：

<hello-world></hello-world>
<div class="hello-world"></div>
<!-- directive:hello-world -->
<div hello-world></div>

部分属性说明：

• restrict: 用来声明指令在DOM中以何种方式被声明，默认值是A
• replace: 默认值为false，意思是模板会被当做子元素插入到调用此指令的元素内部
• transclude: 为true，表示允许将自己的html模板嵌入到指令模板中，默认值为false
• template: html文本，展示在页面渲染的内容
• templateUrl: 外部html文件路径，在实际生产中，可以提前将模板缓存到一个定义模板的javascript文件中。

---

angularjs深度学习参考

• Angular执行流程（一）
• 从Angular源码看scope（二）
• Angular指令编译原理（三）
• Angular服务深度剖析（四）
• Angular路由深入浅出（五）

---

Adventure may hurt you, but monotony will kill you. - -也许冒险会让你受伤，但一成不变会使你灭亡。

[msforest]

29 AngularJS Interview Questions – Can You Answer Them All?

1. 对angular的filter过滤器进行单元测试的基本步骤？

• 注入包含filter的模块
• 加载filter依赖的mocks相关js
• 获取filter实例去使用$filter('filtername')
• 编写预期的结果

2.watches存放最大的数量是多少，怎么保持一个可观的数量?

• 为了减少内存消耗和提升性能，应该限制watches数量在2000以内；使用ng-stats插件可以帮助跟踪watches的数量和digest循环。

3.控制器之间怎么传递数据？

• 创建services，利用services进行数据传递
• 使用events传递($emit/$broadcast)
• 使用$rootScope传递
• 使用$parent/nextSibling/controllerAs传递

4.ng-if和ng-show/ng-hide的不同？

• ng-show/ng-hide总是会插入到DOM中，通过条件判断来决定display的属性值显示与否；ng-if根据条件判断是否插入到DOM中；当我们判断是否显示DOM的时候，用ng-if总是比ng-show/ng-hide效果好。

5.AngularJS的digest循环是什么？

• 每一次的digest的循环，AngularJS会对scope数据值进行新老值的比较；digest循环是自动触发的，也可以通过$apply手动触发digest循环。 For more information, take a look in the ng-book explanation: The Digest Loop and $apply

6.使用AngularJS在哪儿实现DOM操作？

• 指令。DOM操作不应该出现控制器、服务、或其他地方。 Here is a detailed explanation

7.混合使用AngularJS和jQuery好还是不好？

• 肯定是不好的。我们应该远离jQuery，AngularJS有和jQuery类似的方法去操作DOM

8.如果要从1.4迁移到1.5，主要重构的事情是什么？

• 将directive和component适配成1.5的components

9.怎么实现单向绑定

• {{::value}}

10.单向绑定和双向绑定有什么区别

• 略

11.解释一下$scope.$apply()是怎么工作的？

• $scope.$apply()是AngularJS的一个核心方法，强制angular引擎运行所有watch上的变量。

12.使用什么指令可以通过移除DOM上的元素而不改变样式来隐藏元素？

• ng-if

13.什么使得angular.copy()如此强大？

• 变量的深拷贝

14. 怎样使AngularJS的services返回一个promise？

angular.factory('testService', function($q){
    return {
        getName: function(){
            var deferred = $q.defer();

            //API call here that returns data
            testAPI.getName().then(function(name){
                deferred.resolve(name)
            });
            return deferred.promise;
        }
    }
});

15.略

16. 指令的类型都有哪些？如何使用？

• 创建指令的时候，使用restrict来指定指令的类型：A/E/C/M

17.什么时候使用属性？什么时候使用元素？

• 创建component时使用元素，装饰或添加新功能使用属性。

18.如何重置$timeout/$interval，如何取消$watch？

var customTimeout = $timeout(function () {
  // arbitrary code
}, 55);

$timeout.cancel(customTimeout);
///////
var deregisterWatchFn = $scope.$on(‘$destroy’, function () {
    // we invoke that deregistration function, to disable the watch
    deregisterWatchFn();
});

19.解释$scope是什么？

• Scope是js对象，是表达式的执行上下文；Scopes被设置成层级结构，和DOM结构类似；Scope可以监测表达式和传播事件；Scope作为控制器和视图的一种桥梁。

20.指令是什么？

• 指令是一种作为DOM元素的标记，用于指示AngularJS的$compile服务绑定特定的行为到DOM元素上，或将碎片模板转换成DOM元素。

21.DDO （Directive Definition Object）是什么？

• DDO是创建指令的使用的一个Object对象，创建指令的对象有以下参数：

  var directiveDefinitionObject = {
  priority: 0,
  template: '<div></div>', // or // function(tElement, tAttrs) { ... },
  // or
  // templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... },
  transclude: false,
  restrict: 'A',
  templateNamespace: 'html',
  scope: false,
  controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
  controllerAs: 'stringIdentifier',
  bindToController: false,
  require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'],
  compile: function compile(tElement, tAttrs, transclude) {
    return {
      pre: function preLink(scope, iElement, iAttrs, controller) { ... },
      post: function postLink(scope, iElement, iAttrs, controller) { ... }
    }
    // or
    // return function postLink( ... ) { ... }
  },
  // or
  // link: {
  //  pre: function preLink(scope, iElement, iAttrs, controller) { ... },
  //  post: function postLink(scope, iElement, iAttrs, controller) { ... }
  // }
  // or
  // link: function postLink( ... ) { ... }
  };"

22. 什么是单例模式？在AngularJS中哪里使用到这种模式？

• 使用一次或多次使用类时只实例化一次对象。在DI和services中经常使用到单例。

23. interceptor是什么？哪里使用的比较多？

• interceptor是发起$http请求的一个中间件。interceptor是注册$httpProvider的一个工厂函数，在请求和响应的时候会调用interceptor。

24.在指令执行和转换之前，如何修改指令模板？

• 使用compile方法。因为在执行和转换之前，compile方法有权修改指令模板，所以compile方法是安全地处理模板的。

25.如何验证文本输入值？

• 使用ng-pattern内置指令用正则表达式匹配。

26.在应用中，如何实现全局的异常处理？

• AngularJS提供了一个内置的错误处理服务叫$exceptionHandler。

  myApp.factory('$exceptionHandler', function($log, ErrorService) {
  return function(exception, cause) {
  
      if (console) {
          $log.error(exception);
          $log.error(cause);
      }
  
      ErrorService.send(exception, cause);
  };
  });

27.通过按钮点击事件如何隐藏一个元素？

• 略

28.如何通过数据模型值的变化来触发更多的行为？

• 使用$watch方法实现

  function MyCtrl($scope) {
  $scope.email = "";
  
  $scope.$watch("email", function(newValue, oldValue) {
      if ($scope.email.length > 0) {
          console.log("User has started writing into email");
      }
  });
  }

29.如何根据checkbox的状态来禁用按钮？

• 使用ng-disable指令绑定到checkbox的值

  <body ng-app>
  <label><input type="checkbox" ng-model="checked"/>Disable Button</label>
  <button ng-disabled="checked">Select me</button>
  </body>