【相关推荐:《angular教程》】
指令的功能集非常丰富,不过我们已经发现了指令的帕累托分布:使用angular编写的大量指令只会用到可用性和设计模式中很小的比例,这些指令大概可以分为4类:
- 只渲染指令——这些指令将渲染作用域中的数据,但不会修改数据。
- 事件处理封装器——这些指令将封装事件处理程序,从而与数据绑定进行交互,例如ngClick,这些指令不渲染数据。
- 双向指令——这些指令既渲染数据也修改数据。
- 集合了以上3种功能的模板指令。
只渲染指令
这些指令遵守一个简单的设计模式:它们将监视变量并更新DOM元素,以反映变量的变化,如ngClass,ngBind。
angular.module('app', []). directive('myBackgroundImage', function () { return function (scope, element, attrs) { scope.$watch(attrs.myBackgroundImage, function (newVal, oldVal) { element.css('background-image', 'url(' + ')'); }); } });
事件处理封装器
从高级别看,事件处理程序指令可以通过调用$apply函数将DOM事件与数据绑定绑定在一起,如ngClick,下面类似的自定义click。
angular.module('app', []). directive('myNgClick', function () { return function (scope, element, attrs) { element.click(function () { scope.$eval(attrs.myNgClick); scope.$apply(); }); } });
双向指令
该模式同时使用了只渲染指令和事件处理程序模式,用于创建控制变量状态的指令。
angular.module('app', []). directive('myNgClick', function () { return function (scope, element, attrs) { //监视和更新 scope.$watch(attrs.toggleButton, function (v) { element.val(!v ? 'Disable' : 'Enable'); }); //事件处理程序 element.click(function () { scope[attrs.toggleButton] = !scope[attrs.toggleButton]; scope.$apply(); }); } });
高级模板指令
模板指令可以通过设定模板的选项来构造强大的指令,其实以上实例返回的函数就相当于模板的link函数。
angular.module('app', []). directive('imageCarousel', function () { return { templateUrl: 'view/index.html', controller: carouselController, scope: {}, link: function (scope, element, attrs) { scope.$parent.$watch(attrs.imageCarousel, function (v){ scope.images = v; }); } } });
模板选项还有很多其他的选项,可参考我的其他博文,这里主要关注的是设计模式。
更多编程相关知识,请访问:编程入门!!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。