이 글에서는 angular 지시문의 4가지 디자인 패턴을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
[관련 추천: "angular Tutorial"]
명령어의 기능 세트는 매우 풍부하지만 우리는 명령어의 파레토 분포를 발견했습니다. 각도로 작성된 많은 수의 명령어는 유용성 및 디자인 패턴의 매우 작은 부분인 이러한 지침은 대략 4가지 범주로 나눌 수 있습니다.
이 지시문은 간단한 디자인 패턴을 따릅니다. 즉, 변수를 관찰하고 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!