Angular的指令

也就是directive，其实就是一WebComponent，以前端的眼光来看，好象很复杂，但是以后端的眼光来看，还是非常简单的。其实就是一个中等水平的类。

var myModule = angular.module(...); myModule.directive('namespaceDirectiveName', function factory(injectables) { var directiveDefinitionObject = { restrict: string, priority: number, template: string, templateUrl: string, replace: bool, transclude: bool, scope: bool or object, controller: function controllerConstructor($scope, $element, $attrs, $transclude), require: string, link: function postLink(scope, iElement, iAttrs) { ... }, compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, iElement, iAttrs, controller) { ... } } } }; return directiveDefinitionObject; });

属性作用

  • restrict 定义指令的限制，有四种，E element也就是元素,比如自定义一个my-menu的指令（或者叫组件）,这玩意还可以组合，‘EA'这样子。

    E element

    A attribute



    C class

    M comment

  • priority 设置元素跟随指令的优先级，不设是0，ng-repeat是1000，值越大优先级越高。

  • template 指定一段字符串模板

  • templateUrl 指定一个Url地址的模板

  • replace true替换模板内容到元素，false增加模板内容到元素。

  • transclude 反式包含，本人推测可能是trans include的合成词，老外的小花招，就是把指令里的内容，给替换到模板里面去，有点象是传参数，或者是Decorator模式

    这块找到的资料给的例子都太复杂，这里本人给出一个最简单的例子,当然这个模式那可玩的花样相当复杂，还可以做更深层次的东西。

``



这里是用户的内容，要反向包含到指令里去

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

    appModule.directive('decorator', function () {

        return {

            restrict: 'E',

            transclude: true,

            template: '<div style="color:red">这里把用户的内容给包含进来了[<div ng-transclude></div>]</div>'

        };

    });

</script>

``

好象markdown插入代码显示有问题。