Maison > Article > interface Web > Une brève discussion sur les 4 modèles de conception dans les instructions angulaires
Cet article vous présentera les 4 modèles de conception de la directive angulaire. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
[Recommandation associée : "tutoriel angulaire"] L'ensemble de fonctions de la directive
est très riche, mais nous avons découvert la distribution Pareto : un grand nombre d'instructions écrites en Angular n'utiliseront qu'une petite proportion de modèles d'utilisabilité et de conception. Ces instructions peuvent être grossièrement divisées en 4 catégories :
Ces directives suivent un modèle de conception simple : elles surveilleront une variable et mettront à jour l'élément DOM pour refléter les changements dans la variable, comme 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(' + ')'); }); } });
À un niveau élevé, les directives du gestionnaire d'événements peuvent lier les événements DOM avec des liaisons de données en appelant la fonction $apply, comme ngClick, ce qui suit clic personnalisé similaire.
angular.module('app', []). directive('myNgClick', function () { return function (scope, element, attrs) { element.click(function () { scope.$eval(attrs.myNgClick); scope.$apply(); }); } });
Ce mode utilise à la fois la directive de rendu uniquement et le modèle de gestionnaire d'événements pour créer des directives qui contrôlent l'état des variables.
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(); }); } });
Les instructions de modèle peuvent construire des instructions puissantes en définissant les options de modèle. En fait, la fonction renvoyée par l'exemple ci-dessus est équivalente à la fonction de lien de. le modèle.
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; }); } } });
Il existe de nombreuses autres options dans les options de modèles, veuillez vous référer à mes autres articles de blog. L'accent principal ici est sur les modèles de conception.
Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!