中国建设网站红黑榜名单,化妆品网站开发背景,四川省造价工程信息网,广州市民网页官网AngularJS Custom Directives 好讨厌不带日期的博客#xff0c;而且说得好啰嗦 自定义指令介绍 AngularJS 指令作用是在 AngulaJS 应用中操作 Html 渲染。比如说#xff0c;内插指令 ( {{ }} ), ng-repeat 指令以及 ng-if 指令。 当然你也可以实现自己的。这就是 AngularJS 所… AngularJS Custom Directives 好讨厌不带日期的博客而且说得好啰嗦 自定义指令介绍 AngularJS 指令作用是在 AngulaJS 应用中操作 Html 渲染。比如说内插指令 ( {{ }} ), ng-repeat 指令以及 ng-if 指令。 当然你也可以实现自己的。这就是 AngularJS 所谓的教会 HTML 玩新姿势。本文将告诉你如何做到。 指令类型 可以自定义的指令类型如下: 元素属性CSS classComment directives这里面AngularJS 强烈建议你用元素和属性类型而不用 CSS class 和 comment directives (除非迫不得已)。 指令类型决定了指令何时被激活。当 AngularJS 在 HTML 模板中找到一个 HTML 元素的时候元素指令被激活。当 AngularJS 找到一个 HTML 元素属性时属性指令被激活。当 AngularJS 找到一个 CSS class 时 CSS class 指令被激活最后当 AngularJS 找到 HTML comment 时comment directive 被激活。 基础例子 你可以向模块注册一个指令像这样: !-- lang: js --
myapp angular.module(myapp, []);myapp.directive(div, function() {var directive {};directive.restrict E; /* restrict this directive to elements */directive.template My first directive: {{textToInsert}};return directive;
});来看模块中调用的 directive() 函数。当你调用该函数时意味着你要注册一个新指令。directive() 函数的第一个参数是新注册指令的名称。这是之后你在 HTML 模板中调用它的时候用的名称。例子中我用了 div 意思是说当 HTML 模板每次在找到 HTML 元素类型是 div 的时候这个指令都会被激活。 传递给 directive 函数的第二个参数是一个工厂函数。调用该函数会返回一个指令的定义。 AngularJS 通过调用该函数来获取包含指令定义的 Javascript 对象。如果你有仔细看上面的例子你会知道它返回的确是是一个 Javascript 对象。 这个从工厂函数中返回的 Javascript 对象有两个属性: restrict 和 template 字段。 restrict 字段用来设置指令何时被激活是匹配到 HTML 元素时还是匹配到元素属性时。也就是指令类型。把restrict 设置为 E 时只有名为 div 的 HTML 元素才会激活该指令。把 restrict 设置为 A 时只有名为 div 的 HTML 元素属性才会激活该指令。你也可以用 AE 这样会使得匹配到元素名和元素属性名时都可以激活该指令。 template 字段是一个 HTML 模板用来替换匹配的 div 元素。它会把匹配到的 div 当成一个占位符然后用 HTML 模板在同一位置来替换掉它。也就是说HTML 模板替换匹配的到 HTML 元素。 比如说你的 HTML 页面有这样一段 HTML: !-- lang: js --
div ng-controllerMyController divThis div will be replaced/div
/div当 AngularJS 找到内嵌的 div 的时候会激活自定义的指令。然后把该 div 元素替换掉替换后的 HTML 将变成这样: !-- lang: js --
My first directive: {{textToInsert}}然后你看到了这段 HTML 里面包含了一个内插指令 ({{textToInsert}})。AngularJS 会再执行一次让内插指令实际值显示出来。然后 $scope.textToInsert 属性将会在这个 HTML 点上替换掉内插指令占位符。 template 和 templateUrl 属性 创建自定义指令最简单的例子就是上面这样了。你的指令用来生成 HTML然后你把 HTML 放到指令定义对象的 template 属性中。下面这个例子是上面那最简单的例子的重复注意 template 部分: !-- lang: js --
myapp angular.module(myapp, []);myapp.directive(div, function() {var directive {};directive.restrict E; /* restrict this directive to elements */directive.template My first directive: {{textToInsert}};return directive;
});如果 HTML 模板越来越大把它写在一个 Javascript 字符串中肯定非常难维护。你可以把它放到一个单独的文件中然后 AngularJS 可以通过这个文件把它加载进来。然后再把 HTML 模板文件的 URL 放到指令定义对象的 templateUrl 属性中。下面是例子: !-- lang: js --
myapp angular.module(myapp, []);myapp.directive(div, function() {var directive {};directive.restrict E; /* restrict this directive to elements */directive.templateUrl /myapp/html-templates/div-template.html;return directive;
});然后 AngularJS 会从 templateUrl 属性中设置的 URL 将 HTML 模板加载进来。 用独立的 HTML 模板文件设置 templateUrl 属性在你要创建更多的通用指令时会显得更加有用比如说用来显示用户信息的指令。例子: !-- lang: js --
myapp angular.module(myapp, []);myapp.directive(userinfo, function() {var directive {};directive.restrict E; /* restrict this directive to elements */directive.templateUrl /myapp/html-templates/userinfo-template.html;return directive;
});例子创建了一个指令当AngularJS 找到一个 元素的时候就会激活它。AngularJS 加载指向 /myapp/html-templates/userinfo-template.html 的模板并解析它它就像从一开始就被嵌在上一级 HTML 文件中一样。 从指令中隔离 $scope 在上面的例子中把 userinfo 指令硬绑定到了 $scope 因为 HTML 模板是直接引用 textToInsert 属性的。直接引用 $scope 让指令在同一个 controller 中的时候非常难复用因为 $scope 在同一个 controller 中的值都是一样的。比如说你在页面的 HTML 中这样写的时候: !-- lang: js --
userinfo/userinfo
userinfo/userinfo这两个 元素会被同样的 HTML 模板取代然后绑定到同样的 $scope 变量上。结果就是两个 元素将会被一模一样的 HTML 代码给替换了。 为了把两个 元素绑定到 $scope 中的不同的值你需要给 HTML 模板一个 isolate scope。 所谓 isolate scope 是绑定在指令上的独立的 scope 对象。下面是定义的例子: !-- lang: js --
myapp.directive(userinfo, function() {var directive {};directive.restrict E;directive.template User : {{user.firstName}} {{user.lastName}};directive.scope {user : user}return directive;
})请看 HTMl 模板中的两个内插指令 {{user.firstName}} 和 {{user.lastName}}。注意 user. 部分。以及directive.scope 属性。 directive.scope 是个带 user 属性的 Javascript 对象。于是 directive.scope 就成为了 isolate scope 对象现在 HTML 模板被绑到了 directive.scope.user 上(通过 {{user.firstName}} 和 {{user.lastName}} 内插指令)。 directive.scope.user 被设置为 user 。意思是说 directive.scope.user 和 scope 中的属性绑在一起的(不是 isolate scope)scope 中的属性通过 user 属性传入 元素。听起来挺费劲的直接看例子: !-- lang: js --
userinfo userjakob/userinfo
userinfo userjohn/userinfo这两个 元素都有 user 属性。user 的值指向了 $scope 中同名属性被指定的 $scope 中的属性将在 userinfo 的 isolate scope object 中被使用。 下面是完整的例子: !-- lang: js --
userinfo userjakob/userinfo
userinfo userjohn/userinfoscript
myapp.directive(userinfo, function() {var directive {};directive.restrict E;directive.template User : b{{user.firstName}}/b b{{user.lastName}}/b;directive.scope {user : user}return directive;
});myapp.controller(MyController, function($scope, $http) {$scope.jakob {};$scope.jakob.firstName Jakob;$scope.jakob.lastName Jenkov;$scope.john {};$scope.john.firstName John;$scope.john.lastName Doe;
});/scriptcompile() 和 link() 函数 如果你需要在你的指令中做更高级的操作单纯使用 HTML 模板做不到的时候你可以考虑使用 compile() 和 link() 函数。 compile() 和 link() 函数定义了指令如何修改匹配到的 HTML。 当指令第一次被 AngularJS 编译的时候 (在 HTML 中第一次被发现)compile() 函数被调用。compile() 函数将为该元素做一次性配置。 然后 compile() 函数以返回 link() 作为终结。link() 函数将在每次元素被绑到 $scope 数据时都被调用。 下面是例子: !-- lang: js --
script
myapp angular.module(myapp, []);
myapp.directive(userinfo, function() {var directive {};directive.restrict E; /* restrict this directive to elements */directive.compile function(element, attributes) {// do one-time configuration of element.var linkFunction function($scope, element, atttributes) {// bind element to data in $scope}return linkFunction;}return direc
t
ive;
});
/script
**compile() 函数带两个参数: element 和 attributes。**element 参数是 jqLite 包装过的 DOM 元素。AngularJS 有一个简化版 jQuery 可以用于操作 DOM所以对 element 的 DOM 操作方式和你在 jQuery 中所知的一样。attributes 参数是包含了 DOM 元素中的所有的属性集合的 Javascript 对象。因此你要访问某个属性你可以这样写 attributes.type。link() 函数带三个参数: $scopeelement 和 attributes。element 和attributes 参数和传到 compile() 函数中的一样。$scope 参数是正常的 scope 对象或者当你在指令定义对象中定义了 isolate scope 的时候它就是 isolate scope。compile() 和 link() 的命名相当混乱。它们肯定是受编译队伍的启发而命名的。我可以看到相似点不过一个编译器是传入一次然后输出。而指令则是配置一次 HTML 元素然后在之后的 $scope 对象改变时进行更新。compile() 函数如果叫做 create(), init() 或者 configure()也许会更好。这样可以表达出这个函数只会被调用一次的意思。而 link() 函数如果叫 bind() 或者 render() 也许会更好能更好的表达出这样的意思在指令绑定数据或者重绑定数据的时候这个函数将会被调用。下面是一个完整的例子演示了指令使用 compile() 和 link() 函数的:userinfo This will be replaced/userinfo myapp angular.module(myapp, []);
myapp.directive(userinfo, function() {var directive {};directive.restrict E; /* restrict this directive to elements */directive.compile function(element, attributes) {element.css(border, 1px solid #cccccc);var linkFunction function($scope, element, attributes) {element.html(This is the new content: $scope.firstName);element.css(background-color, #ffff00);}return linkFunction;}return directive;
})
myapp.controller(MyController, function($scope, $http) {$scope.cssClass notificationDiv;$scope.firstName Jakob;$scope.doClick function() {console.log(doClick() called);}
});
compile() 函数设置 HTML 元素的 border 。它只执行一次因为 compile() 函数只执行一次。**link() 替换 HTML 元素内容并且把背景颜色设置为黄色。**把设置 border 放在 compile() 把背景颜色放在 link() 没啥特别的理由。你可以把所有的操作都丢到 compile()或者都放到 link()。如果都放到 compile() 它们只会被设置一次(你需要它们是常量的话)。如果放到了 link()它们会在每次 HTML 元素被绑到 $scope 的时候都发生变化。当你希望根据 $scope 中的数据来设置 boarder 和背景颜色的时候这非常有用。**只设置 link() 函数**有时候你的指令可能不需要 compile() 。你只需要用到 link()。这种情况下你可以直接设置指令定义对象中的 link() 函数。下面是一个对上面例子的修改只用 link 函数:userinfo This will be replaced/userinfo myapp angular.module(myapp, []);
myapp.directive(userinfo, function() {var directive {};directive.restrict E; /* restrict this directive to elements */directive.link function($scope, element, attributes) {element.html(This is the new content: $scope.firstName);element.css(background-color, #ffff00);}return directive;
})
myapp.controller(MyController, function($scope, $http) {$scope.cssClass notificationDiv;$scope.firstName Jakob;$scope.doClick function() {console.log(doClick() called);}
}); 注意 link() 方法和之前例子中返回的 link() 是完全一样的。**通过 Transclusion 封装元素的指令**到目前为止我们看到的所有例子都是把匹配到的元素内容给替换为指令的指定内容不管是通过 Javascript 也好或者 HTML 模板也好。不过如果遇到内容中有部分是开发者可以指定的内容的时候呢比如说:This is a transcluded directive {{firstName}} 标记为 mytransclude 的元素它的部分内容可以由开发者设置。因此这部分 HTML 不应该被指令的 HTML 模板给替换。我们实际上是希望这部分 HTML 由 AngularJS 来处理的。这个处理叫做 transclusion。 1为了能让 AngularJS 把这部分 HTML 放到指令内部处理你必须设置指令定义对象的 transclude 属性为 true。你还需要告诉 AngularJS指令的 HTML 模板中哪一部分需要把 transcluded HTML 包含进来。你可以通过插入 ng-transclude 属性 (实际上是一个指令) 到 HTML 模板的 HTML 元素中标记你想要添加 transcluded HTML 的元素。下面是一个 AngularJS 指令演示如何使用 transclusion:This is a transcluded directive {{firstName}} myapp angular.module(myapp, []);
myapp.directive(mytransclude, function() {var directive {};directive.restrict E; /* restrict this directive to elements */directive.transclude true;directive.template div classmyTransclude ng-transclude/div;return directive;
});
myapp.controller(MyController, function($scope, $http) {$scope.firstName Jakob;
}); 注意 mytransclude 元素内的 HTML。这部分 HTML 代码包含了内插指令 {{firstName}}。我们希望 AngularJS 来为我们处理这部分 HTML让内插指令执行。为了实现这个目的我在指令定义对象中把 transclude 设置为 true。我还在 HTML 模板中用到了 ng-transclude 属性。这个属性告诉 AngularJS 什么元素需要插入到 transcluded HTML。1: 说实话我没看懂那个定义说的太TM难懂了而且我好不爽写代码没输出的教程。只好自己动手做做例子。我觉得其实应该是这样的把目标元素内容作为一个整体拿到 HTML 模板中来添加到 ng-transclude 指定的标签下。这个处理我觉得应该就是叫做 transcluded。比如说刚才的例子(有些 bug自己修正一下)因为 directive.transclude true; 所以原来 mytransclude 元素内的 HTML:This is a transcluded directive {{firstName}} 在激活指令 mytransclude 的时候会被拿到 mytransclude 指令的模板中来放到被 ng-transclude 指定的中。于是最终输出的结果应该是:div classmyTransclude ng-transcludespan classng-scope ng-bindingThis is a transcluded directive Jakob/span
/div
