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 :

• Uniquement les instructions de rendu - ces instructions. les données dans la portée seront rendues mais non modifiées.
• Wrappers de gestion d'événements - Ces directives encapsuleront les gestionnaires d'événements pour interagir avec les liaisons de données, telles que ngClick, ces directives ne restituent pas les données.
• Commandes bidirectionnelles - Ces commandes restituent et modifient les données.
• Instructions de modèle qui combinent les trois fonctions ci-dessus.

Directives de rendu uniquement

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(' + ')');
			});
		}
	});

Encapsuleur de gestion d'événements

À 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();
		});
	}
});

Directives bidirectionnelles

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();
		});
	}
});

Instructions de modèle avancées

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!