AngularJ 학습: 지시문 사용법(정식 버전)

이 튜토리얼에서는 AngularJ 버전 1.5.3을 사용합니다

AngularJs GitHub: https://github.com/angular/angular.js/

AngularJ 다운로드 주소: https://angularjs.org/

요약: Directive(instruction)는 AngularJ의 매우 강력하고 유용한 기능 중 하나라고 생각합니다. 이는 공개 사용자 정의 DOM 요소나 CLASS 속성 또는 ATTR 속성을 작성하는 것과 동일하며, 이를 기반으로 범위 조작, 이벤트 바인드, 스타일 변경 등을 수행할 수도 있습니다. 이 지시문을 통해 페이징 지침, 자동 완성 지침 등과 같은 많은 공개 지침을 캡슐화할 수 있습니다. 그런 다음 HTML 페이지에 코드 한 줄만 작성하면 많은 강력한 기능을 얻을 수 있습니다. 일반적으로 Directive는 다음과 같은 상황에서 사용해야 합니다.
1. HTML을 좀 더 의미있게 만들면 코드와 논리를 깊이 파고들지 않고도 페이지의 일반적인 논리를 알 수 있습니다.
2. 사용자 정의 구성 요소를 추상화하고 다른 곳에서 재사용합니다.

1. Directive의 정의와 사용법
AngularJ의 지시어 정의는 대략 다음과 같습니다

angular.module("app",[]).directive("directiveName",function(){ 
 return{ 
 //通过设置项来定义 
 }; 
})

로그인 후 복사

지시문은 요소 이름, 속성, 클래스 및 주석에 배치할 수 있습니다. 다음은 myDir 지시어를 참조하는 것과 동일한 방법입니다. (그러나 많은 지시문은 "속성"의 사용으로 제한됩니다.)

<span <span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span><span style="font-family: Arial, Helvetica, sans-serif;">="exp"></span>//属性</span> 
 
<span class="<span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span>: exp;"></span>//class 
 
<<span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span>></<span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span>>//元素 
 
<!-- directive: <span style="font-family: Arial, Helvetica, sans-serif;">directive-name </span><span style="font-family: Arial, Helvetica, sans-serif;">exp -->//注释</span>

로그인 후 복사

다음은 예시입니다.

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<hello-world></hello-world> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('helloWorld', function() { 
 return { 
 restrict: 'E', 
 template: '<div>Hi 我是林炳文~~~</div>', 
 replace: true 
 }; 
}); 
</script> 
</html>

로그인 후 복사

결과:

다음은 자세한 지침 버전입니다

var myModule = angular.module(...); 
 
myModule.directive('directiveName', function factory(injectables) { 
 
 var directiveDefinitionObject = { 
 
 　　priority: 0, 
 
 　　template: '<div></div>', 
 
 　　templateUrl: 'directive.html', 
 
 　　replace: false, 
 
 　　transclude: false, 
 
 　　restrict: 'A', 
 
 　　scope: false, 
 
 　　compile: function compile(tElement, tAttrs, transclude) { 
 
 　　　　return { 
 
 　　　　　　pre: function preLink(scope, iElement, iAttrs, controller) { ... }, 
 
 　　　　　　post: function postLink(scope, iElement, iAttrs, controller) { ... } 
 
　　　　} 
 
　　}, 
 
 　　link: function postLink(scope, iElement, iAttrs) { ... } 
 
}; 
 
 return directiveDefinitionObject; 
 
});

로그인 후 복사

2. 지침 내용의 해석
8개의 컨텐츠로 구성되어 있는 것을 볼 수 있습니다
1.제한
(문자열) 명령이 DOM에서 선언되는 형식을 나타내는 선택적 매개변수입니다. 값은 E(요소), A(속성), C(클래스), M(주석)입니다. 여기서 기본값은 A입니다. ; 물론 EA처럼 두 개를 함께 사용할 수도 있습니다.
[html] 일반 사본 보기 내 코드 조각에서 파생된 CODE의 코드 조각 보기
E(요소): A(속성):

C(클래스):

M(댓글): <--directive:directiveName 표현식--> 일반적으로 E/A/C를 더 많이 사용합니다.

2.우선순위

(숫자), 명령의 우선순위를 나타내는 선택적 매개변수입니다. 단일 DOM에 여러 명령이 있는 경우 우선순위가 높은 명령이 먼저 실행됩니다.
3.터미널

(부울)은 선택적 매개변수로 true 또는 false로 설정할 수 있습니다. true로 설정하면 이 명령어보다 우선순위가 낮은 다른 명령어는 유효하지 않으며 호출되지 않습니다. 여전히 실행됩니다)
4.템플릿(문자열 또는 함수) 선택적 매개변수.

(1) HTML 텍스트

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<hello-world></hello-world> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('helloWorld', function() { 
 return { 
 restrict: 'E', 
 template: '<div><h1>Hi 我是林炳文~~~</h1></div>', 
 replace: true 
 }; 
}); 
</script> 
</html>

로그인 후 복사

(2) 두 개의 매개변수 tElement 및 tAttrs를 허용하는 함수

그 중 tElement는 이 명령어를 사용하는 요소를 참조하고, tAttrs는 인스턴스의 속성으로,

과 같이 해당 요소에 대한 모든 속성으로 구성된 컬렉션(객체)입니다. 제목이 tattrs의 속성인 경우

템플릿이 함수일 때 어떤 일이 일어나는지 살펴보겠습니다

결과:

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<hello-world></hello-world> 
<hello-world2 title = '我是第二个directive'></hello-world2> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('helloWorld', function() { 
 return { 
 restrict: 'E', 
 template: '<div><h1>Hi 我是林炳文~~~</h1></div>', 
 replace: true 
 }; 
}); 
app.directive("helloWorld2",function(){ 
 return{ 
 restrict:'EAC', 
 template: function(tElement,tAttrs){ 
 var _html = ''; 
 _html += '<div>' +'hello '+tAttrs.title+'</div>'; 
 return _html; 
 } 
 }; 
 }); 
</script> 
</html>

로그인 후 복사

hello-world2의 태그에 있는 제목 필드가 명령에도 사용되는 것을 볼 수 있습니다

5.templateUrl(문자열 또는 함수), 선택적 매개변수는

일 수 있습니다.

(1) HTML 파일 경로를 나타내는 문자열

(2) 두 개의 매개변수 tElement 및 tAttrs를 허용하는 함수(대략 위와 동일)
참고: 로컬로 개발하는 경우 서버를 실행해야 합니다. 그렇지 않으면 templateUrl을 사용하면 CORS(Cross Origin Request Script) 오류가 보고됩니다. HTML 템플릿은 비동기식으로 로드되므로 많은 수의 템플릿을 로드하면 웹사이트 속도가 느려집니다. 먼저 템플릿을 캐시하는 방법이 있습니다. 색인 페이지가 로드된 후 페이지의 일부로 다음 코드를 포함할 수 있습니다.

这里的id属性就是被设置在templateUrl上用的。

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<hello-world></hello-world> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('helloWorld', function() { 
 return { 
 restrict: 'E', 
 templateUrl: 'hello.html', 
 replace: true 
 }; 
}); 
</script> 
<script type='text/ng-template' id='hello.html'> 
 <div><h1>Hi 我是林炳文~~~</h1></div> 
</script> 
</html>

로그인 후 복사

输出结果：

另一种办法缓存是:

app.run(["$templateCache", function($templateCache) { 
 $templateCache.put("hello.html", 
 "<div><h1>Hi 我是林炳文~~~</h1></div>"); 
}]);

로그인 후 복사

使用实例如下：

 
 
 
  
 AngularJS入门学习

로그인 후 복사

结果：

其实第一种方法还好一些，写起来会比较快，笔者就得最多的也是第一种写法，直接包在scprit当中

6.replace
（布尔值），默认值为false，设置为true时候，我们再来看看下面的例子（对比下在template时候举的例子）

replace为true时，hello-world这个标签不在了，反之，则存在。

7.scope
（1）默认值false。表示继承父作用域;

（2）true。表示继承父作用域，并创建自己的作用域（子作用域）;

（3）{}。表示创建一个全新的隔离作用域；

7.1首先我们先来了解下scope的继承机制。我们用ng-controller这个指令举例，

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<div ng-controller='MainController'> 
 父亲:{{name}}<input ng-model="name" /> 
 <div my-directive></div> 
 </div> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.controller('MainController', function ($scope) { 
 $scope.name = '林炳文'; 
}); 
app.directive('myDirective', function () { 
 return { 
 restrict: 'EA', 
 scope:false, 
 template: '<div>儿子:{{ name }}<input ng-model="name"/></div>' 
 }; 
}); 
</script> 
</html>

로그인 후 복사

接下来我们通过一个简单明了的例子来说明scope取值不同的差别：

scope:false

scope:true

scope:{}

当为false时候，儿子继承父亲的值，改变父亲的值，儿子的值也随之变化，反之亦如此。（继承不隔离）

当为true时候，儿子继承父亲的值，改变父亲的值，儿子的值随之变化，但是改变儿子的值，父亲的值不变。（继承隔离）

当为{}时候，没有继承父亲的值，所以儿子的值为空，改变任何一方的值均不能影响另一方的值。（不继承隔离）

tip：当你想要创建一个可重用的组件时隔离作用域是一个很好的选择，通过隔离作用域我们确保指令是‘独立'的,并可以轻松地插入到任何HTML app中，并且这种做法防止了父作用域被污染；
7.2隔离作用域可以通过绑定策略来访问父作用域的属性。
directive 在使用隔离 scope 的时候，提供了三种方法同隔离之外的地方交互。这三种分别是

@ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串，因为 dom 属性是字符串。
& 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称，则属性名称为相同的本地名称。
= 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。

@ 局部 scope 属性

@ 方式局部属性用来访问 directive 外部环境定义的字符串值，主要是通过 directive 所在的标签属性绑定外部字符串值。这种绑定是单向的，即父 scope 的绑定变化，directive 中的 scope 的属性会同步变化，而隔离 scope 中的绑定变化，父 scope 是不知道的。

如下示例：directive 声明未隔离 scope 类型，并且使用@绑定 name 属性，在 directive 中使用 name 属性绑定父 scope 中的属性。当改变父 scope 中属性的值的时候，directive 会同步更新值，当改变 directive 的 scope 的属性值时，父 scope 无法同步更新值。

js 代码：

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<div ng-controller="myController"> 
 <div class="result"> 
 <div>父scope： 
 <div>Say：{{name}}<br>改变父scope的name：<input type="text" value="" ng-model="name"/></div> 
 </div> 
 <div>隔离scope： 
 <div isolated-directive name="{{name}}"></div> 
 </div> 
 <div>隔离scope（不使用父scope {{name}}）： 
 <div isolated-directive name="name"></div> 
 </div> 
 </div> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
 app.controller("myController", function ($scope) { 
 $scope.name = "hello world"; 
 }).directive("isolatedDirective", function () { 
 return { 
 scope: { 
 name: "@" 
 }, 
 template: 'Say：{{name}} <br>改变隔离scope的name：<input type="buttom" value="" ng-model="name" class="ng-pristine ng-valid">' 
 }; 
}); 
</script> 
</html>

로그인 후 복사

结果：页面初始效果

动画效果：

可以看到父scope上的内容发生改变，子scope同时发生改变。而子scope上的内容发生改变。不影响父scope上的内容！

= 局部 scope 属性

= 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。
意思是，当你想要一个双向绑定的属性的时候，你可以使用=来引入外部属性。无论是改变父 scope 还是隔离 scope 里的属性，父 scope 和隔离 scope 都会同时更新属性值，因为它们是双向绑定的关系。

示例代码：

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
<div ng-controller="myController"> 
 <div>父scope： 
 <div>Say：{{user.name}}<br>改变父scope的name：<input type="text" value="" ng-model="userBase.name"/></div> 
 </div> 
 <div>隔离scope： 
 <div isolated-directive user="userBase"></div> 
 </div> 
</div> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
 app.controller("myController", function ($scope) { 
 $scope.userBase = { 
 name: 'hello', 
 id: 1 
 }; 
 }).directive("isolatedDirective", function () { 
 return { 
 scope: { 
 user: "=" 
 }, 
 template: 'Say：{{user.name}} <br>改变隔离scope的name：<input type="buttom" value="" ng-model="user.name"/>' 
 } 
 }) 
</script> 
</html>

로그인 후 복사

效果：

可以看到父scope和子scope上的内容一直都是一样的！
& 局部 scope 属性

& 方式提供一种途经是 directive 能在父 scope 的上下文中执行一个表达式。此表达式可以是一个 function。
比如当你写了一个 directive，当用户点击按钮时，directive 想要通知 controller，controller 无法知道 directive 中发生了什么，也许你可以通过使用 angular 中的 event 广播来做到，但是必须要在 controller 中增加一个事件监听方法。
最好的方法就是让 directive 可以通过一个父 scope 中的 function，当 directive 中有什么动作需要更新到父 scope 中的时候，可以在父 scope 上下文中执行一段代码或者一个函数。

如下示例在 directive 中执行父 scope 的 function。

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<body> 
 <div ng-controller="myController"> 
 <div>父scope： 
 <div>Say：{{value}}</div> 
 </div> 
 <div>隔离scope： 
 <div isolated-directive action="click()"></div> 
 </div> 
</div> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
 app.controller("myController", function ($scope) { 
 $scope.value = "hello world"; 
 $scope.click = function () { 
 $scope.value = Math.random(); 
 }; 
 }).directive("isolatedDirective", function () { 
 return { 
 scope: { 
 action: "&" 
 }, 
 template: '<input type="button" value="在directive中执行父scope定义的方法" ng-click="action()"/>' 
 } 
 }) 
</script> 
</html>

로그인 후 복사

效果：

指令的内容比较多，下面再来讲讲transclude、compline、link、contrller

8.transclude
如果不想让指令内部的内容被模板替换，可以设置这个值为true。一般情况下需要和ngTransclude指令一起使用。比如：template:"

hello every

"，这时，指令内部的内容会嵌入到ng-transclude这个div中。也就是变成了

hello every

这是指令内部的内容

。默认值为false；这个配置选项可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。当你开启transclude后，你就可以使用ng-transclude来指明了应该在什么地方放置transcluded内容

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
<div sidebox title="Links"> 
  <ul> 
  <li>First link</li> 
  <li>Second link</li> 
  </ul> 
</div> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('sidebox', function() { 
 return { 
 restrict: 'EA', 
 scope: { 
  title: '@' 
 }, 
 transclude: true, 
 template: '<div class="sidebox">\ 
  <div class="content">\ 
  <h2 class="header">{{ title }}</h2>\ 
  <span class="content" ng-transclude>\ 
  </span>\ 
  </div>\ 
 </div>' 
 }; 
}); 
</script> 
</html>

로그인 후 복사

结果：

当 transclude: false,时

如果指令使用了transclude参数，那么在控制器无法正常监听数据模型的变化了。建议在链接函数里使用$watch服务。
9.controller
可以是一个字符串或者函数。

若是为字符串，则将字符串当做是控制器的名字，来查找注册在应用中的控制器的构造函数

angular.module('myApp', []) 
.directive('myDirective', function() { 
restrict: 'A', // 始终需要 
controller: 'SomeController' 
}) 
// 应用中其他的地方，可以是同一个文件或被index.html包含的另一个文件 
angular.module('myApp') 
.controller('SomeController', function($scope, $element, $attrs, $transclude) { 
// 控制器逻辑放在这里 
}); 
也可以直接在指令内部的定义为匿名函数，同样我们可以再这里注入任何服务（$log,$timeout等等）

[html] view plain copy 在CODE上查看代码片派生到我的代码片
angular.module('myApp',[]) 
.directive('myDirective', function() { 
restrict: 'A', 
controller: 
function($scope, $element, $attrs, $transclude) { 
// 控制器逻辑放在这里 
} 
});

로그인 후 복사

另外还有一些特殊的服务（参数）可以注入

（1）$scope，与指令元素相关联的作用域

（2）$element，当前指令对应的元素

（3）$attrs，由当前元素的属性组成的对象

（4）$transclude，嵌入链接函数，实际被执行用来克隆元素和操作DOM的函数

注意： 除非是用来定义一些可复用的行为，一般不推荐在这使用。
指令的控制器和link函数（后面会讲）可以进行互换。区别在于，控制器主要是用来提供可在指令间复用的行为但link链接函数只能在当前内部指令中定义行为，且无法再指令间复用。

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./1.5.3/angular.min.js"></script> 
</head> 
 <hello mycolor ="red">我是林炳文~~~</hello> 
</body> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 
app.directive('hello', function() { 
 return { 
  restrict: 'EA', 
  transclude: true, //注意此处必须设置为true 
  controller: 
  function ($scope, $element,$attrs,$transclude,$log) { //在这里你可以注入你想注入的服务 
  $transclude(function (clone) { 
   var a = angular.element('<p>'); 
   a.css('color', $attrs.mycolor); 
   a.text(clone.text()); 
   $element.append(a); 
  }); 
  $log.info("hello everyone"); 
  } 
 }; 
 }); 
</script> 
</html>

로그인 후 복사

输出结果：

并且在控制台下输出hello everyone

让我们看看$transclude();在这里，它可以接收两个参数，第一个是$scope，作用域，第二个是带有参数clone的回调函数。而这个clone实际上就是嵌入的内容（经过jquery包装），可以在它上做很多DOM操作。

它还有最简单的用法就是

<script> 
 angular.module('myApp',[]).directive('mySite', function () { 
 return { 
  restrict: 'EA', 
  transclude: true, 
  controller: 
  function ($scope, $element,$attrs,$transclude,$log) { 
  var a = $transclude(); //$transclude()就是嵌入的内容 
  $element.append(a); 
  } 
 }; 
 }); 
 </script>

로그인 후 복사

注意：使用$transclude会生成一个新的作用域。
默认情况下，如果我们简单实用$transclude()，那么默认的其作用域就是$transclude生成的作用域

但是如果我们实用$transclude($scope,function(clone){}),那么作用域就是directive的作用域了

那么问题又来了。如果我们想实用父作用域呢

可以使用$scope.$parent

同理想要一个新的作用域也可以使用$scope.$parent.new()；
10.controllerAs
这个选项的作用是可以设置你的控制器的别名

一般以前我们经常用这样方式来写代码：

angular.module("app",[]) 
 .controller("demoController",["$scope",function($scope){ 
 $scope.title = "angualr"; 
 }]) 
 
 <div ng-app="app" ng-controller="demoController"> 
 {{title}} 
</div>

로그인 후 복사

后来angularjs1.2给我们带来新语法糖，所以我们可以这样写

angular.module("app",[]) 
 .controller("demoController",[function(){ 
 this.title = "angualr"; 
 }]) 
 
 <div ng-app="app" ng-controller="demoController as demo"> 
 {{demo.title}} 
 </div>

로그인 후 복사

同样的我们也可以再指令里面也这样写

<script> 
 angular.module('myApp',[]).directive('mySite', function () { 
 return { 
  restrict: 'EA', 
  transclude: true, 
  controller:'someController', 
  controllerAs:'mainController' 
  //..其他配置 
 }; 
 }); 
 </script>

로그인 후 복사

11.require(字符串或者数组)
字符串代表另一个指令的名字，它将会作为link函数的第四个参数。具体用法我们可以举个例子说明。假设现在我们要编写两个指令，两个指令中的link链接函数中（link函数后面会讲）存在有很多重合的方法，这时候我们就可以将这些重复的方法写在第三个指令的controller中（上面也讲到controller经常用来提供指令间的复用行为）然后在这两个指令中，require这个拥有controller字段的的指令（第三个指令），

最后通过link链接函数的第四个参数就可以引用这些重合的方法了。

<!doctype html> 
<html ng-app="myApp"> 
<head> 
 <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script> 
</head> 
<body> 
 
  
 <outer-directive> 
 <inner-directive></inner-directive> 
 <inner-directive2></inner-directive2> 
 </outer-directive> 
 <script> 
 var app = angular.module('myApp', []); 
 app.directive('outerDirective', function() { 
  return { 
  scope: {}, 
  restrict: 'AE', 
  controller: function($scope) { 
   this.say = function(someDirective) { 
   console.log('Got:' + someDirective.message); 
   }; 
  } 
  }; 
 }); 
 app.directive('innerDirective', function() { 
  return { 
  scope: {}, 
  restrict: 'AE', 
  require: '^outerDirective', 
  link: function(scope, elem, attrs, controllerInstance) { 
   scope.message = "Hi,leifeng"; 
   controllerInstance.say(scope); 
  } 
  }; 
 }); 
 app.directive('innerDirective2', function() { 
  return { 
  scope: {}, 
  restrict: 'AE', 
  require: '^outerDirective', 
  link: function(scope, elem, attrs, controllerInstance) { 
   scope.message = "Hi,shushu"; 
   controllerInstance.say(scope); 
  } 
  }; 
 }); 
 
 
 </script> 
 
</body> 
</html>

로그인 후 복사

위 예제의 innerDirective 및 innerDirective2 명령어는 externalDirective 명령어의 컨트롤러에 정의된 메서드를 재사용합니다

은 또한 명령어의 컨트롤러가 서로 다른 명령어 간의 통신에 사용된다는 점을 추가로 설명합니다.

또한 필수 매개변수 값에 다음 접두사 중 하나를 추가하면 검색 컨트롤러의 동작이 변경됩니다.

(1) 접두사가 없으면 명령은 자체적으로 제공되는 컨트롤러에서 검색합니다. 컨트롤러가 없으면 오류가 발생합니다

(2)? 현재 명령어에서 필요한 컨트롤러를 찾을 수 없으면 링크 연결 함수의 네 번째 매개변수에 null이 전달됩니다.

(3)^필요한 컨트롤러가 현재 지시어에 없으면 상위 요소의 컨트롤러가 검색됩니다.

(4)?^조합

12.Anguar 명령어 컴파일 과정
먼저 anglejs 라이브러리를 로드하고 ng-app 지시문을 찾아 애플리케이션의 경계를 찾습니다.

ng-app에서 정의한 범위에 따라 컴파일을 위해 $compile 서비스를 호출합니다. Angularjs는 전체 HTML 문서를 탐색하고 우선순위에 따라 js의 명령어 정의에 따라 페이지에 선언된 각 명령어를 처리합니다. 명령어) 배열, 명령어의 구성 매개변수(템플릿, 배치, 삽입 등)에 따라 DOM을 변환한 다음 각 명령어의 컴파일 기능을 순서대로 실행하기 시작합니다(컴파일 기능이 명령어에 정의된 경우). 템플릿 자체를 변환하려면

참고: 여기의 컴파일 기능은 위에서 언급한 $compile 서비스와는 다른 지침에 구성되어 있습니다. 각 컴파일 함수가 실행된 후 링크 함수를 반환하고 모든 링크 함수는 하나의 큰 링크 함수로 합성됩니다

그런 다음 DOM에 리스너를 등록하여 범위 내 데이터를 동적으로 수정하거나 $watchs를 사용하여 범위 내 변수를 수신하여 DOM을 수정함으로써 주로 데이터 바인딩을 위해 이 빅 링크 함수가 실행됩니다. 따라서 양방향 바인딩 등을 만듭니다. 우리의 명령에서 컴파일 기능이 구성되지 않은 경우, 우리가 구성한 링크 기능이 실행됩니다. 그녀가 하는 일은 위의 컴파일 반환 후 모든 링크 기능에 의해 합성된 대형 링크 기능과 거의 동일합니다.

따라서 명령의 컴파일 옵션과 링크 옵션은 상호 배타적입니다. 이 두 옵션을 동시에 설정하면 컴파일에서 반환된 함수가 링크 함수로 간주되어 링크 옵션 자체가 무시됩니다.

13. 컴파일 기능 컴파일 기능

함수 컴파일(tElement, tAttrs, transclude) { ... }
컴파일된 함수는 템플릿 DOM을 수정해야 하는 상황을 처리하는 데 사용됩니다. 대부분의 지침에서는 템플릿 수정이 필요하지 않으므로 이 기능은 일반적으로 사용되지 않습니다. 사용해야 하는 예로는 템플릿 수정이 필요한 ngTrepeat와 콘텐츠의 비동기 로딩이 필요한 ngView가 있습니다. 컴파일된 함수는 다음 매개변수를 허용합니다.

tElement - 템플릿 요소 - 지시문이 위치한 요소입니다. 이 요소와 해당 하위 요소에 대한 변환과 같은 작업을 수행하는 것이 안전합니다.
tAttrs - 템플릿 속성 - 이 요소의 모든 지시문에 의해 선언된 속성입니다. 이러한 속성은 컴파일된 함수 간에 공유됩니다.
transclude - 내장된 연결 함수 함수(scope, cloneLinkingFn).
참고: 컴파일된 함수에서는 DOM 변환 이외의 작업을 수행하지 마세요. 더 중요한 것은 DOM 수신 이벤트 등록이 컴파일된 함수가 아닌 링크 함수에서 수행되어야 한다는 것입니다.
컴파일된 함수는 객체나 함수를 반환할 수 있습니다.
함수를 반환합니다. 컴파일된 함수가 존재하지 않을 때 구성 개체의 link 속성을 사용하여 등록된 링크 함수와 동일합니다.
객체 반환 - pre 또는 post 속성을 통해 등록된 함수가 있는 객체를 반환합니다. 아래의 사전 연결 및 사후 좋아요 기능에 대한 설명을 참조하세요.

14. 연결 기능

함수 링크(범위, iElement, iAttrs, 컨트롤러) { ... }
링크 기능은 DOM 이벤트 등록 및 DOM 업데이트를 담당합니다. 이는 템플릿이 복제된 후에 실행되며 대부분의 지시문 논리가 작성되는 곳입니다.
범위 - 지시문이 수신해야 하는 범위입니다.
iElement - 인스턴스 요소 - 명령어가 위치한 요소입니다. postLink 함수에서 요소의 하위 요소에 대해서만 작업하는 것이 안전합니다. 왜냐하면 하위 요소가 모두 연결되기 때문입니다.
iAttrs - 인스턴스 속성 - 인스턴스 속성은 현재 요소에 선언된 모든 속성의 표준화된 목록입니다. 이러한 속성은 모든 링크 기능에서 공유됩니다.
컨트롤러 - 현재 명령어가 require를 통해 요청하는 direct2 내부의 컨트롤러인 컨트롤러 인스턴스입니다. 예를 들어 direct2 명령어의 Controller:function(){this.addStrength = function(){}}을 사용하면 현재 명령어의 링크 함수에서 Controller.addStrength를 통해 호출할 수 있습니다.
하위 요소가 연결되기 전에 사전 연결 기능이 실행됩니다. 링크 함수가 링크할 올바른 요소를 찾을 수 없는 경우 DOM을 변환하는 데 사용할 수 없습니다.
Post-linking 기능은 모든 요소가 연결된 후에 실행됩니다.

지침:

컴파일 옵션 자체는 자주 사용하지 않으나, 링크 기능은 자주 사용하게 됩니다. 본질적으로 링크 옵션을 설정할 때 실제로는 compile() 함수가 링크 함수를 정의할 수 있도록 postLink() 링크 함수를 생성합니다. 일반적으로 컴파일 기능이 설정되면 명령 및 실시간 데이터가 DOM에 배치되기 전에 DOM 작업을 수행한다는 의미입니다. 이 함수에서 노드 추가 및 삭제와 같은 DOM 작업을 수행하는 것이 안전합니다. 컴파일 및 링크 옵션은 상호 배타적입니다. 두 옵션을 모두 설정하면 컴파일에서 반환된 함수가 링크 함수로 처리되고 링크 옵션 자체는 무시됩니다. 번역 기능은 템플릿 DOM 변환을 담당합니다. 링크 기능은 범위를 DOM에 연결하는 역할을 합니다. 범위가 DOM에 연결되기 전에 DOM을 수동으로 조작할 수 있습니다. 실제로 이러한 종류의 작업은 사용자 지정 지시문을 작성할 때 매우 드물지만 이러한 기능을 제공하는 몇 가지 내장 지시문이 있습니다. 링크 기능은 선택 사항입니다. 컴파일 함수를 정의하면 링크 함수를 반환하므로, 두 함수를 모두 정의하면 컴파일 함수가 링크 함수를 오버로드하게 됩니다. 지시문이 간단하고 추가 설정이 필요하지 않은 경우 객체 대신 팩토리 함수(콜백 함수)에서 함수를 반환할 수 있습니다. 이렇게 하면 해당 기능이 링크 기능이 됩니다.

이 기사에서 재인쇄http://blog.csdn.net/evankaka

위 내용은 AngularJs: 지시문 사용법의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.