각도 명령의 4가지 디자인 패턴에 대한 간략한 설명

이 글에서는 angular 지시문의 4가지 디자인 패턴을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

[관련 추천: "angular Tutorial"]

명령어의 기능 세트는 매우 풍부하지만 우리는 명령어의 파레토 분포를 발견했습니다. 각도로 작성된 많은 수의 명령어는 유용성 및 디자인 패턴의 매우 작은 부분인 이러한 지침은 대략 4가지 범주로 나눌 수 있습니다.

• 렌더링 전용 지침 - 이 지침은 범위 내에서 데이터를 렌더링하지만 데이터를 수정하지는 않습니다.
• 이벤트 처리 래퍼 - 이 지시문은 ngClick과 같은 데이터 바인딩과 상호 작용하기 위해 이벤트 핸들러를 캡슐화하지만 이 지시문은 데이터를 렌더링하지 않습니다.
• 양방향 명령어 - 이 명령어는 데이터를 렌더링하고 수정합니다.
• 위 세 가지 기능의 템플릿 지침을 통합합니다.

Render 지시문만

이 지시문은 간단한 디자인 패턴을 따릅니다. 즉, 변수를 관찰하고 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(' + ')');
			});
		}
	});

이벤트 처리 래퍼

상위 수준에서 이벤트 핸들러 지시문은 ngClick과 같은 $apply 함수 및 아래의 유사한 사용자 정의 클릭을 호출하여 데이터 바인딩으로 DOM 이벤트를 바인딩할 수 있습니다.

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

템플릿 옵션에는 다른 많은 옵션이 있습니다. 제 다른 블로그 게시물을 참조하세요. 여기서 주요 초점은 디자인 패턴입니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 각도 명령의 4가지 디자인 패턴에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!