이 글에서는 Angular 지시문을 자세히 소개하고 사용법을 이해해보겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
Directive는 AngularJS에서 더 복잡할 수 있습니다. 일반적으로 우리는 그것을 지시로 이해합니다. AngularJS에는 ng-app, ng-controller 등과 같은 많은 사전 설정 지침이 함께 제공됩니다. AngularJS와 함께 제공되는 지침은 모두 ng-로 시작하는 특징을 찾을 수 있습니다.
그럼 Directive란 정확히 무엇인가요? 내 개인적인 이해는 HTML과 JS 조각을 함께 캡슐화하여 특정 기능을 갖춘 재사용 가능한 독립 엔터티를 형성한다는 것입니다. Directive의 일반적인 사용법을 자세히 설명하겠습니다.
var myDirective = angular.module('directives', []);
myDirective.directive('directiveName', 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"
위에 표시된 것처럼 반환 객체에는 많은 속성이 있으며 이 속성 줄은 지시어를 정의하는 데 사용됩니다.
namename
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将与属性名一致。
<widget my-attr="count = count + value">，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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
