angular指令的4种设计模式
来源:互联网 发布:淘宝助理5.5下载 编辑:程序博客网 时间:2024/05/22 16:50
指令的功能集非常丰富,不过我们已经发现了指令的帕累托分布:使用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;});}}});
阅读全文
1 0
- angular指令的4种设计模式
- angular(指令--restict匹配模式)
- angular的基本指令
- angular的指令
- Angular强大的指令
- Angular的内置指令
- angular 指令的问题
- angular的指令
- 关于Angular 指令的理解
- Angular 比较常用的指令
- angular创建自定义的指令
- angular指令间的交互
- Angular 比较常用的指令
- angular指令和指令之间的交互
- AngularJS入门(4)-Angular指令
- [angular]指令之4templateUrl
- angular指令
- angular指令
- 两数组的交二
- 20、理解UDP套接字
- 21、基于UDP的服务器端和客户端
- LeetCoder 19. Remove Nth Node From End of List
- 小鼠压疮模型的制备
- angular指令的4种设计模式
- 两数之和
- 编程字符集的简单认识
- 【OpenCV】之find_obj基础上的局部图像透视变换
- [解决办法]ubuntu14.04 adb devices无法识别手机
- 通过调用静态工厂方法创建 Bean
- 哈希函数
- vim 简单使用
- LeetCode 5. Longest Palindromic Substring