本文实例讲述了Angular1.x自定义指令。分享给大家供大家参考,具体如下:
调用Module.directive方法,传入指令名称和工厂函数,返回一个对象。
指令名称中每个大写字母会被认为是属性名中的一个独立的词,而每个词之间是以一个连字符分隔的。
var myApp = angular.module('myApp', []) .directive("unorderedList", function () { return function(scope, element, attrs) { }; });
返回链式函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS Demo</title> <link rel="stylesheet" href="../css/bootstrap.css" rel="external nofollow" /> <link rel="stylesheet" href="../css/bootstrap-theme.css" rel="external nofollow" > <script src="../js/angular.js"></script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div class="panel panel-default"> <div class="panel-heading"> <h3>Products</h3> </div> <div class="panel-body"> <div unordered-list="products"></div> </div> </div> </body> <script> var myApp = angular.module('myApp', []) .controller('myCtrl', ["$scope", function ($scope) { $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 } ]; }]) .directive("unorderedList", function () { return function (scope, element, attrs) { var data = scope[attrs['unorderedList']]; if( angular.isArray(data) ){ for(var i=0, len=data.length; i<len; i++){ console.log(data[i].name); } } }; }); </script> </html>
打破对数据属性的依赖
设置一个元素属性,用来动态第设置需要参加运算的键。如果属性名是以data-为前缀的,AngularJS会在生成传给连接函数的属性集合时移除这一前缀。也就是说data-list-property和list-property都会被表示为listProperty。
<div unordered-list="products" list-property="name"></div>
var data = scope[attrs['unorderedList']]; var propertyName = attrs['listProperty']; if(angular.isArray(data)){ var listElem = angular.element("<ul>"); element.append(listElem); for(var i=0, len=data.length; i<len; i++){ listElem.append( angular.element('<li>').text(data[i][propertyName]) ); } }
计算表达式
<div unordered-list="products" list-property="price | currency"></div>
添加过滤器后,自定义指令被破坏了。可以让作用域将属性值当做一个表达式进行计算。scope.$eval()接收两个参数:要计算的表达式和需要用于执行该计算的任意本地数据。
listElem.append( angular.element('<li>').text(scope.$eval(propertyName, data[i])) );
处理数据变化
<div class="panel-body"> <button class="btn btn-primary" ng-click="incrementPrices()"> Change Prices </button> </div>
$scope.incrementPrices = function () { for(var i=0,len = $scope.products.length; i<len; i++){ $scope.products[i].price++; } }
添加监听器
if(angular.isArray(data)){ var listElem = angular.element("<ul>"); element.append(listElem); for(var i=0, len=data.length; i<len; i++){ var itemElem = angular.element('<li>'); listElem.append(itemElem); var watchFn = function (watchScope) { return watchScope.$eval(propertyName, data[i]); }; scope.$watch(watchFn, function (newValue, oldValue) { itemElem.text(newValue); }); } }
第一个函数(监听器函数)基于作用域中的数据计算出一个值,该函数在每次作用域发生变化时都会被调用。如果该函数的返回值发生了变化,处理函数就会被调用,这个过程就像字符串表达式方式一样。提供一个函数来监听,能够从容地面对表达式中有可能带有过滤器的数据值得情形。
第二个监听器函数是针对$eval()计算的表达变化,来执行回调函数的。
以上代码并不能正确显示,涉及到for循环闭包问题。
for(var i=0, len=data.length; i<len; i++){ (function () { var itemElem = angular.element('<li>'); listElem.append(itemElem); var index = i; var watchFn = function (watchScope) { return watchScope.$eval(propertyName, data[index]); }; scope.$watch(watchFn, function (newValue, oldValue) { itemElem.text(newValue); }); }()); }
或者
(function (i) { var itemElem = angular.element('<li>'); listElem.append(itemElem); var watchFn = function (watchScope) { return watchScope.$eval(propertyName, data[i]); }; scope.$watch(watchFn, function (newValue, oldValue) { itemElem.text(newValue); }); })(i);
jqLite
jqLite中element()、append()等方法的参数是HTML string or DOMElement。
return function (scope, element, attrs) { var listElem = element.append("<ol>"); for (var i = 0; i < scope.names.length; i++) { listElem.append("<li>").append("<span>").text(scope.names[i]); } }
上述添加的是字符串,最后添加只有scope.names中最后一条信息。
return function (scope, element, attrs) { var listElem = angular.element("<ol>"); element.append(listElem); for (var i = 0; i < scope.names.length; i++) { listElem.append(angular.element("<li>") .append(angular.element("<span>").text(scope.names[i]))); } }
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
本文向大家介绍Angular1.x复杂指令实例详解,包括了Angular1.x复杂指令实例详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Angular1.x复杂指令。分享给大家供大家参考,具体如下: 名称 描述 compile 指定一个编译函数 controller 为指令创建一个控制器函数 link 为指令指定链接函数 replace 指定模板内容是否替换指令所应用到的元素 req
本文向大家介绍vue自定义指令directive实例详解,包括了vue自定义指令directive实例详解的使用技巧和注意事项,需要的朋友参考一下 下面给大家介绍vue自定义指令directive,具体内容如下所示: 官网截图实例 vue除了一些核心的内部定义的指令(v-model,v-if,v-for,v-show)外,vue也允许用户注册自己的一些功能性的指令,有时候你实在是要对Dom操作
本文向大家介绍Vue的土著指令和自定义指令实例详解,包括了Vue的土著指令和自定义指令实例详解的使用技巧和注意事项,需要的朋友参考一下 1.土著指令 当我开始学习Vue的时候,看官网的时候看到了“指令”两个字。我愣住了,what?指令是啥啊?后来继续往下看,像这种什么“v-for”“v-show”“v-if”都叫做指令。等到后来Vue玩的差不多了,开始写项目的时候发现,常见的指令也就那么几个,
创建自定义指令 第一步,创建一个自定义命令类文件,新建application/common/command/Hello.php <?php namespace app\common\command; use think\console\Command; use think\console\Input; use think\console\input\Argument; use think\con
自定义指令可以使用 macro 指令来定义, 这是模板设计者所关心的内容。 Java程序员若不想在模板中实现定义指令,而是在Java语言中实现指令的定义, 这时可以使用 freemarker.template.TemplateDirectiveModel 类来扩展 (请参考 后续章节)。 基本内容 宏是有一个变量名的模板片段。可以在模板中使用宏作为自定义指令, 这样就能进行重复性的工作。例如,创建
本文向大家介绍Angular.js自定义指令学习笔记实例,包括了Angular.js自定义指令学习笔记实例的使用技巧和注意事项,需要的朋友参考一下 本文给大家分享angular.js学习笔记之自定义指令实例代码讲解,具体代码如下所示: 以上所述是小编给大家介绍的Angular.js自定义指令的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊
主要内容:实例,实例,钩子,实例,实例除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例 <div id="app"> <p>页面载入时,input 元素自动获取焦点:</p> <input v-focus> </div> <script> // 注册一个全局自定义指令 v-focus Vue.d
主要内容:实例,实例,钩子,实例,实例,实例除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例 <div id="app"> <p>页面载入时,input 元素自动获取焦点:</p> <input v-focus> </div> <script> const app = Vue.createApp({}