이 글에서는 Angular 지시문을 자세히 소개하고 사용법을 이해해보겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
Directive는 AngularJS에서 더 복잡할 수 있습니다. 일반적으로 우리는 그것을 지시로 이해합니다. AngularJS에는 ng-app, ng-controller 등과 같은 많은 사전 설정 지침이 함께 제공됩니다. AngularJS와 함께 제공되는 지침은 모두 ng-로 시작하는 특징을 찾을 수 있습니다.
그럼 Directive란 정확히 무엇인가요? 내 개인적인 이해는 HTML과 JS 조각을 함께 캡슐화하여 특정 기능을 갖춘 재사용 가능한 독립 엔터티를 형성한다는 것입니다. Directive의 일반적인 사용법을 자세히 설명하겠습니다.
var myDirective = angular.module(&#39;directives&#39;, []); myDirective.directive(&#39;directiveName&#39;, function($inject) { return { template: &#39;<div></div>&#39;, replace: false, transclude: true, restrict: &#39;E&#39;, scope: {}, controller: function($scope, $element) { }, complie: function(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { }, post: function postLink(scope, iElement, iAttrs, controller) { } }; }, link: function(scope, iElement, iAttrs) { } }; });
return { name: &#39;&#39;, priority: 0, terminal: true, scope: {}, controller: fn, require: fn, restrict: &#39;&#39;, template: &#39;&#39;, templateUrl: &#39;&#39;, replace: &#39;&#39;, transclude: true, compile: fn, link: fn }
추천 관련 튜토리얼: "angular tutorial"
위에 표시된 것처럼 반환 객체에는 많은 속성이 있으며 이 속성 줄은 지시어를 정의하는 데 사용됩니다.
name
name
priority
teminal
scope
true
{}
controller
require
restrict
template
templateUrl
우선순위
🎜🎜🎜우선순위. 동일한 DOM 요소에 여러 지시문이 정의된 경우 실행 순서를 지정해야 하는 경우가 있습니다. 이 속성은 지시문의 컴파일 기능이 호출되기 전에 정렬하는 데 사용됩니다. 우선순위가 동일하면 실행 순서가 불확실하다(경험에 따르면 우선순위가 높은 것이 먼저 실행되고, 우선순위가 동일하면 먼저 바인딩된 후 실행된다). 🎜🎜🎜🎜🎜terminal
🎜🎜🎜마지막 그룹입니다. true로 설정하면 현재 우선순위가 실행될 마지막 지시문 그룹이 된다는 의미입니다. 즉, 이 지시문보다 우선순위가 낮은 지시문은 실행되지 않습니다. 동일한 우선순위가 계속 실행되지만 순서는 불확실합니다. 🎜🎜🎜🎜🎜scope
🎜🎜🎜true
🎜🎜는 이 지시어에 대한 새로운 범위를 생성합니다. 동일한 요소에 새 범위가 필요한 여러 지시문이 있는 경우에도 여전히 하나의 범위만 생성됩니다. 루트 템플릿은 새로운 범위를 얻는 경향이 있기 때문에 새로운 범위 지정 규칙은 루트 템플릿에 적용되지 않습니다. 🎜🎜🎜🎜{}
🎜🎜는 새로운 독립 범위를 생성합니다. 이 범위와 일반 범위의 차이점은 프로토타입을 통해 상위 범위에서 상속되지 않는다는 것입니다. 이는 재사용 가능한 구성 요소를 만드는 데 도움이 되며 상위 범위의 데이터를 읽거나 수정하는 것을 효과적으로 방지할 수 있습니다. 이 독립 범위는 상위 범위에서 파생된 로컬 범위 속성 집합을 사용하여 해시 집합을 만듭니다. 이러한 로컬 범위 속성은 템플릿이 값에 대한 별칭을 만드는 데 유용합니다. 로컬의 정의는 로컬 범위 속성 집합을 소스에 대한 해시 매핑입니다. 🎜🎜🎜🎜🎜🎜🎜컨트롤러
🎜🎜🎜컨트롤러 생성자. 컨트롤러는 사전 연결 단계 전에 초기화되며 지정된 이름을 사용하여 요구 사항을 통해 다른 지시문을 공유할 수 있습니다. 이를 통해 지시문이 서로 통신하고 서로의 동작을 향상시킬 수 있습니다. 컨트롤러는 기본적으로 다음 로컬 개체를 주입합니다. 🎜🎜$scope 현재 요소와 결합된 범위 🎜🎜$element 현재 요소 🎜🎜$attrs 현재 요소의 속성 개체 🎜🎜$transclude 사전 바인딩된 전치된 연결 함수 현재 범위로 🎜🎜🎜🎜🎜🎜🎜require
🎜🎜🎜다른 컨트롤러를 요청하고 이를 현재 지시어의 연결 함수에 전달합니다. require는 지시문 컨트롤러의 이름을 전달해야 합니다. 이 이름에 해당하는 컨트롤러를 찾을 수 없으면 오류가 발생합니다. 이름 앞에 다음이 붙을 수 있습니다. 🎜🎜 예외를 발생시키지 마세요. 이렇게 하면 이 종속성이 부모 요소 컨트롤러 🎜🎜🎜🎜🎜🎜🎜restrict
🎜🎜🎜EACM의 하위 집합을 검색할 수 있는 선택적 🎜🎜^ 문자열이 되어 지시문을 지정된 선언 방법으로 제한합니다. . 생략하면 지시어는 속성을 통한 선언만 허용합니다. 🎜🎜E 요소 이름: 🎜🎜A 속성 이름: 🎜🎜C 클래스 이름: 🎜🎜M 댓글: 🎜🎜🎜🎜🎜🎜🎜template
🎜 🎜🎜replace가 true인 경우 템플릿 콘텐츠는 현재 html 요소를 대체하고 원본 요소의 속성과 클래스는 함께 전송됩니다. replacement가 false인 경우 템플릿 요소는 현재 요소의 하위 요소로 처리됩니다. . 🎜🎜🎜🎜🎜templateUrl
🎜replace
transclude
true/false
转换这个directive的内容。(这个感觉上,是直接将内容编译后搬入指定地方)‘element’
转换整个元素,包括其他优先级较低的directive。(像将整体内容编译后,当作一个整体(外面再包裹p),插入到指定地方)compile
link
这里关于directive的scope为一个object时,有更多的内容非常有必要说明一下。看下面的代码:
scope: { name: &#39;=&#39;, age: &#39;=&#39;, sex: &#39;@&#39;, say: &#39;&&#39; }
这个scope中关于各种属性的配置出现了一些奇怪的前缀符号,有=,@,&,那么这些符号具体的含义是什么呢?再看下面的代码:
<div my-directive name="myName" age="myAge" sex="male" say="say()"></div>复制代码
function Controller($scope) { $scope.name = &#39;Pajjket&#39;; $scope.age = 99; $scope.sex = &#39;我是男的&#39;; $scope.say = function() { alert(&#39;Hello,我是弹出消息&#39;); }; }
=
: 指令中的属性取值为Controller中对应$scope上属性的取值@
: 指令中的取值为html中的字面量/直接量&
: 指令中的取值为Controller中对应$scope上的属性,但是这个属性必须为一个函数回调
下面是更加官方的解释:=
或者=expression/attr
例如: 中,widget定义的scope为:{localModel: '=myAttr'},那么widget scope property中的localName将会映射父scope的parentModel。如果parentModel发生任何改变,localModel也会发生改变,反之亦然。即双向绑定。
@或者@attr 建立一个local scope property到DOM属性的绑定。因为属性值总是String类型,所以这个值总返回一个字符串。如果没有通过@attr指定属性名称,那么本地名称将与DOM属性的名称一致。 例如: ,widget的scope定义为:{localName: '@myAttr'}。那么,widget scope property的localName会映射出"hello "转换后的真实值。当name属性值发生改变后,widget scope的localName属性也会相应的改变(仅仅是单向,与上面的=不同)。那么属性是在父scope读取的(不是从组件的scope读取的)
&或者&attr 提供一个在父scope上下文中执行一个表达式的途径。如果没有指定attr的名称,那么local name将与属性名一致。
68c72eacde80dbb19dac8db1a79aac0a
,widget的scope定义为:{localFn:’increment()’},那么isolate scope property localFn会指向一个包裹着increment()表达式的function。
一般来说,我们希望通过一个表达式,将数据从isolate scope传到parent scope中。这可以通过传送一个本地变量键值的映射到表达式的wrapper函数中来完成。例如,如果表达式是increment(amount),那么我们可以通过localFn({amount:22})的方式调用localFn以指定amount的值。
下面的示例都围绕着上面所作的参数说明而展开的。
// 自定义directive var myDirective = angular.modeule(&#39;directives&#39;, []); myDirective.directive(&#39;myTest&#39;, function() { return { restrict: &#39;EMAC&#39;, require: &#39;^ngModel&#39;, scope: { ngModel: &#39;=&#39; }, template: &#39;<div><h4>Weather for {{ngModel}}</h4</div>&#39; }; }); // 定义controller var myControllers = angular.module(&#39;controllers&#39;, []); myControllers.controller(&#39;testController&#39;, [ &#39;$scope&#39;, function($scope) { $scope.name = &#39;this is directive1&#39;; } ]); var app = angular.module(&#39;testApp&#39;, [ &#39;directives&#39;, &#39;controllers&#39; ]); <body ng-app="testApp"> <div ng-controller="testController"> <input type="text" ng-model="city" placeholder="Enter a city" /> <my-test ng-model="city" ></my-test> <span my-test="exp" ng-model="city"></span> <span ng-model="city"></span> </div> </body>
templateUrl其实根template功能是一样的,只不过templateUrl加载一个html文件,上例中,我们也能发现问题,template后面根的是html的标签,如果标签很多呢,那就比较不爽了。可以将上例中的,template改一下。
myDirective.directive(&#39;myTest&#39;, function() { return { restrict: &#39;EMAC&#39;, require: &#39;^ngModel&#39;, scope: { ngModel: &#39;=&#39; }, templateUrl:&#39;../partials/tem1.html&#39; //tem1.html中的内容就是上例中template的内容。 } });
//directives.js中定义myAttr myDirectives.directive(&#39;myAttr&#39;, function() { return { restrict: &#39;E&#39;, scope: { customerInfo: &#39;=info&#39; }, template: &#39;Name: {{customerInfo.name}} Address: {{customerInfo.address}}<br>&#39; + &#39;Name: {{vojta.name}} Address: {{vojta.address}}&#39; }; }); //controller.js中定义attrtest myControllers.controller(&#39;attrtest&#39;,[&#39;$scope&#39;, function($scope) { $scope.naomi = { name: &#39;Naomi&#39;, address: &#39;1600 Amphitheatre&#39; }; $scope.vojta = { name: &#39;Vojta&#39;, address: &#39;3456 Somewhere Else&#39; }; } ]); // html中 <body ng-app="testApp"> <div ng-controller="attrtest"> <my-attr info="naomi"></my-attr> </div> </body>
Name: Naomi Address: 1600 Amphitheatre //有值,因为customerInfo定义过的 Name: Address: //没值 ,因为scope重定义后,vojta是没有定义的
myDirectives.directive(&#39;myAttr&#39;, function() { return { restrict: &#39;E&#39;, template: &#39;Name: {{customerInfo.name}} Address: {{customerInfo.address}}<br>&#39; + &#39;Name: {{vojta.name}} Address: {{vojta.address}}&#39; }; });
Name: Address: Name: Vojta Address: 3456 Somewhere Else
因为此时的directive没有定义独立的scope,customerInfo是undefined,所以结果正好与上面相反。
myDirective.directive(&#39;myEvent&#39;, function() { return { restrict: &#39;E&#39;, transclude: true, scope: { &#39;close&#39;: &#39;$onClick&#39; //根html中的on-click="hideDialog()"有关联关系 }, templateUrl: &#39;../partials/event_part.html&#39; }; }); myController.controller(&#39;eventTest&#39;, [ &#39;$scope&#39;, &#39;$timeout&#39;, function($scope, $timeout) { $scope.name = &#39;Tobias&#39;; $scope.hideDialog = function() { $scope.dialogIsHidden = true; $timeout(function() { $scope.dialogIsHidden = false; }, 2000); }; } ]);
<body ng-app="phonecatApp"> <div ng-controller="eventtest"> <my-event ng-hide="dialogIsHidden" on-click="hideDialog()"> Check out the contents, {{name}}! </my-event> </div> </body> <!--event_part.html --> <div> <a href ng-click="close()">×</a> <div ng-transclude></div> </div>
<body ng-app="phonecatApp"> <div ng-controller="eventtest"> <div ng-hide="dialogIsHidden" on-click="hideDialog()"> <span>Check out the contents, {{name}}!</span> </div> </div> </body>
controller
,link
,compile
之间的关系myDirective.directive(&#39;exampleDirective&#39;, function() { return { restrict: &#39;E&#39;, template: &#39;<p>Hello {{number}}!</p>&#39;, controller: function($scope, $element){ $scope.number = $scope.number + "22222 "; }, link: function(scope, el, attr) { scope.number = scope.number + "33333 "; }, compile: function(element, attributes) { return { pre: function preLink(scope, element, attributes) { scope.number = scope.number + "44444 "; }, post: function postLink(scope, element, attributes) { scope.number = scope.number + "55555 "; } }; } } }); //controller.js添加 myController.controller(&#39;directive2&#39;,[ &#39;$scope&#39;, function($scope) { $scope.number = &#39;1111 &#39;; } ]); //html <body ng-app="testApp"> <div ng-controller="directive2"> <example-directive></example-directive> </div> </body>
Hello 1111 22222 44444 5555 !
由结果可以看出来,controller先运行,compile后运行,link不运行。 我们现在将compile属性注释掉后,得到的运行结果如下:
Hello 1111 22222 33333
!
更多编程相关知识,请访问:编程入门!!
위 내용은 Angular의 Directive 사용법에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!