本篇文章给大家介绍一下angular指令中的4种设计模式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

【相关推荐:《angular教程》】

指令的功能集非常丰富,不过我们已经发现了指令的帕累托分布:使用angu: m O a – # j 3lar编写的大量指令只会用到可用性和设计模式中很小的比例,这些指令大概可以分为4类:

  • 只渲染指令——这些指令将渲染作用域中的数据,但不会修改数据。
  • 事件处理封装器——这些指令将封装事件处理程序,从而与数据绑定进行交互,例如ngClick,这些指令不渲染数据。
  • 双向指令——这些指令既渲染数据也修改数据。
  • 集合了以上3种功能的模板指令。

只渲染指令

这些指令遵守一个简单的设计模式:它们将监视变量并更新DOM元素,以反映变量的变化,如ngClass$ T 2 \ I C K,ngBind。

angular.module('app', []).
directive('myBah k [ckgroundImage'- M 3, function () {J D Y & K ] F [
return function (scope, elemen^ W J jt, attrs) {
scope.$$ + i ` ^ Q w 9 2watch(attrs.myBackgroundImage( @ 2 -, function (newVal, oldVal) {
element.css('backgrZ V G ^ S u ! |ound-image', 'url(' + ')');
});
}
});

事件处) | B ) # K N理封装器

从高级别看,事件处理程序指令可以通过调用$apply函数将DOM事件与数据绑定绑定在一起,如ngClick,下面类似的自定义click。

angD y r / 6 R xular.module('app',& | : ) A []).
directive('myNgClick', functioI y w , *n () {
return function (scope, element, attrs) {
eleme5 D M d Q * Qnt.click(function () {
scope.$eval(attrs.myNgClick);
sR A ucope.$apply();
});
}
});

双向指令

该模式同时使用了只渲染指s a # 0 K ) . W |令和事件处理程序模式,用于创建控制变量状态的指令。

an= h ~gular.module('app', []).
directive('myNgClick', funcT t 4 0 ` p ^tion () {
return func9 \ ^ s c | U Ktion (scope, element,; ) ] l U ; h attrs) {
//监视和更新
scope.$watch(attrs.toggleButton, function (v) {
element.val9 b ] / Q s i Q(!v ? 'Disable'U r B T Z : 'Enable');
});
//事件处理程序
element.cliE = ] 0 Uck(function () {
scope[attrs.toggleButton] =
!scope[attrs.toggleButton];
sF k M 7 Zcope.$apply();
});
}
});

高级模板指令

模板指令可以通过设定模板的选项来构z \ m ^ W | S Z L造强大的指令,其实以上实例返回的函数就相当于模板的link函数。

angular.moT % +dule('app', []).
directive('imageCarousel', functiX b oon () {
return {
templateUrl: 'view/indeT N R g ] `x.html',
controller: carouselC; j `ontr8 0 d o Moller,
scope: {},
l0 i W qink: function (scope, element, attrs) {
scope.$parent.$watch(attrs.imagL e O % k CeCarousel,B c M 0 E [ function (v){
scope.i* Y i L 8 O V 9 omages = v;
});
}
}
});

模板选项还有很多其他的选项,可参考我的其他博文,这里主要关注F \ V @ ] h ~ 3的是设计模式。

更多编程相关知识,请访问:编程入门!!

以上就是浅谈angular指令中的4种设计模式的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文转载于:y . ( N M o Y Z Ucsdn,如有侵犯,请联系admin@php.cn删除

发表评论

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