AngularJS优雅的自定义指令_AngularJS_脚本之家

学习要点威斯尼斯人官网 ,AngularJS优雅的自定义指令_AngularJS_脚本之家。•为什么使用指令•创建自定义指令 •使用jqLite工作

一、为什么使用自定义指令
NG内置了许多自定义指令,但是它们有时并不能满足你的要求,这是需要我们创建自定义属性。

二、自定义指令
接下来,我们来做一个小案例,当鼠标单击加价后,列表项自动递增,当然列表也是通过指令自动添加的,它本就是一个空的div

 Angluar test     Products    加价       angular.module .directive("unorderlist", function () { // scope 作用域 // element 应用该指令的元素 // attrs 使用该指令的元素的属性 return function (scope, element, attrs) { // attrs['unorderlist'] 获取unorderlist属性值,这里为products // 获取数据模型值,这里为scope.products var data = scope[attrs['unorderlist']]; // 创建一个<ul>标签元素 var ul = angular.element; // 在应用该指令的元素中添加<ul> element.append; // 获取listProperty属性值,这里为price | currency var expression = attrs['listProperty']; // 判断是否为数组 if ) { // 遍历数据模型scope.products for (var i = 0; i < data.length; i++) { // 添加闭包,将i传递进去  { // 创建一个<li>标签元素 var li = angular.element; // 将<li>标签添加到<ul>中 ul.append; // 监听器函数,用$eval计算表达式和data[index]的值 var watcherFn = function  { return watchScope.$eval(expression, data[index]); } // 添加$watch监听器监听作用域的变化 scope.$watch(watcherFn, function  { // 更新li的值 li.text; } } } }) .controller("defaultCtrl", function  { // 数据模型 $scope.products = [ { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 }, { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 }, { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 } ]; // 递增价格 $scope.incrementPrices = function () { for (var i = 0; i < $scope.products.length; i++) { $scope.products[i].price++; } } })

解析:
第一步:创建控制器,添加数据模型products和递增价格incrementPrices()方法
第二步:自定义unorderlist标签,该标签的作用是:通过作用域数据模型的值,将其值以无序列表的方式展示出来
第三部:并且在单击加价按钮时,无序列表的值会依次递增

三、使用jqLite工作 NG内置了jqLite,它是JQuery的缩小版

 Angluar test      Apples  Bananas Cherries Oranges  Pears Oranges  angular.module .directive("domeDirective", function () { return function (scope, element, attrs) { // 找出element元素下所有的li,这里的element是调用者<ol> var items = element.find; // 要所有的li的font-weight为bold items.css("font-weight", "bold"); // 遍历li, 值为Oranges的字体颜色为red,其余为green for (var i = 0; i < items.length; i++) { if  == "Oranges"){ items.eq.css; } else { items.eq.css; } } // 打印出li的长度和字体颜色 console.log("Items length : " + items.length); console.log("Color: " + items.css

解析: 第一步:自定义控制器,定义数据模型names
第二步:自定义指令,功能是将使用指令的元素下的所有li找出,并且更加值的不同赋给字体不同的颜色
第三步:在视图中调用并且使用指令

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章