2015-5-19 YouTube精彩Angular视频 Advanced Directives with Angular JS

[hjzheng]

Advanced Directives with Angular JS

• html as a dsl
• abstractions in html
• $compile
• $templateRequest
• $templateCache
• directive definition object
• requiring other directives
• directive communication ($scope.$broadcast, $scope.$on)

视频: https://www.youtube.com/watch?v=Ty8XcASK9js 代码: https://github.com/davemo/advanced-directives-with-angular-js

[hjzheng]

$compile

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

下面Code中使用了$compile方法

angular.module("app").directive("editorInitializer", function($compile, $templateCache) {
  return {
    restrict: 'E',
    templateUrl: '/templates/editor_initializer.html',
    controller: function($scope) {
      $scope.edit = function(row) {
        $scope.$broadcast('edit', row);
      };
    },
    link: function(scope, element, attributes) {
      scope.$on('edit', function(e, row) {
        var editor = $compile($templateCache.get("/templates/editor.html"))(scope);
        $(editor).insertAfter(element.parents("tr"));
      });
      console.log('linked editorInitializer');
    }
  };
});

更多细节可以参看 html compile

[hjzheng]

$templateRequest

$templateRequest(tpl, [ignoreRequestError]);

$templateRequest service 使用$http service将所需要的html模板下载下来 并存到 $templateCache 中. 如果 HTTP 请求失败 或者 返回的数据为空, 一个 $compile 异常将会被抛出 (这个异常可以通过设置第二参数为true，阻止掉).

如何使用

angular.module("app", []).run(function($templateRequest) {
  $templateRequest("/templates/editor.html");
});

[hjzheng]

$templateCache

这个service就不多说了，大家可以自己参考文档，$templateRequest 将模板存入它里面。我只需要通过$templateCache 的get方法取出来就行。

directive definition object (参考官方文档)

var myModule = angular.module(...);

myModule.directive('directiveName', function factory(injectables) {
  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( ... ) { ... }
  };
  return directiveDefinitionObject;
});

附赠一份angular directive生命周期

[hjzheng]

require other directives

在directive definition object 中配置require，可以使一个指令，也可以是一个指令数组 require: '^foo' 或这 require:['^foo', 'bar'], 这样就可以在link方法中使用你require的指令的controller方法中的方法了，当然有时候，你需要自己引入自己，可以参照 https://github.com/angular-ui/bootstrap/blob/master/src/buttons/buttons.js 非常有意思。

注意这些语法:

(no prefix) - Locate the required controller on the current element. Throw an error if not found. ? - Attempt to locate the required controller or pass null to the link fn if not found. ^ - Locate the required controller by searching the element and its parents. Throw an error if not found. ^^ - Locate the required controller by searching the element's parents. Throw an error if not found. ?^ - Attempt to locate the required controller by searching the element and its parents or pass null to the link fn if not found. ?^^ - Attempt to locate the required controller by searching the element's parents, or pass null to the link fn if not found.

[hjzheng]

directive communication ($scope.$broadcast, $scope.$on)

指令之间的沟通，数据传递和交换，可以通过$broadcast 和 $emit 方法传递事件的方式进行沟通 $broadcast 向 scope children 传递 $emit 向 scope parents 传递 大家可以参考，本视频的例子 https://github.com/davemo/advanced-directives-with-angular-js/blob/master/grid_directives.js