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

``

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

posted @ 2014-01-13 15:59  人工智能-群513704292 阅读( ...) 评论( ...) 编辑 收藏

刷新评论 刷新页面 返回顶部

转载于:https://www.cnblogs.com/DSharp/p/3517425.html