Angular 命令の 4 つのデザイン パターンに関する簡単な説明

angular.module('app', []).
	directive('myBackgroundImage', function () {
		return function (scope, element, attrs) {
			scope.$watch(attrs.myBackgroundImage, function (newVal, oldVal) {
				element.css('background-image', 'url(' + ')');
			});
		}
	});

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

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