Angular指令1

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

``


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