Angular JS : 범위가있는 지시문 컨트롤러가 이미있을 때 지시문 링크 기능이 필요한 것은 무엇입니까?

Angular JS : 범위가있는 지시문 컨트롤러가 이미있을 때 지시문 링크 기능이 필요한 것은 무엇입니까?

---

범위 및 템플릿에서 일부 작업을 수행해야합니다. link함수 또는 함수 에서 모두 할 수있는 것 같습니다 controller(둘 다 범위에 액세스 할 수 있기 때문에).

link컨트롤러가 아닌 기능 을 사용해야하는 경우는 언제 입니까?

angular.module('myApp').directive('abc', function($timeout) {
    return {
        restrict: 'EA',
        replace: true,
        transclude: true,
        scope: true,
        link: function(scope, elem, attr) { /* link function */ },
        controller: function($scope, $element) { /* controller function */ }
    };
}

또한 나는 그것이 link비 각형 세계 라는 것을 이해합니다 . 그래서, 내가 사용할 수 있습니다 $watch, $digest하고 $apply.

link컨트롤러가 이미있을 때 기능 의 의미는 무엇입니까 ?

---

and 함수 와의 초기 투쟁과 그들에 대해 많은 것을 읽은 후에 , 나는 이제 대답이 있다고 생각합니다.linkcontroller

먼저 이해 하자.

각도 지시어는 간단히 말하면 어떻게 작동합니까?

• 템플릿으로 시작합니다 (문자열로 또는 문자열로로드 됨)

  var templateString = '<div my-directive>{{5 + 10}}</div>';

• 자, 이것은 각도 요소templateString 로 싸여 있습니다.

  var el = angular.element(templateString);

• 를 사용 하여 링크 함수를 다시 얻기 위해 el컴파일합니다 .$compile

  var l = $compile(el)

  여기에 무슨 일이 일어나는가?

  • $compile 전체 템플릿을 살펴보고 인식하는 모든 지시문을 수집합니다.
  • 발견 된 모든 지시문은 재귀 적 으로 컴파일 되고 해당 link기능이 수집됩니다.
  • 그런 다음 모든 link함수가 새 link함수에 래핑 되고로 반환됩니다 l.

• 마지막으로, scope이 l(링크) 함수에 기능을 제공 합니다.이 기능은이 scope요소와 해당 요소로 래핑 된 링크 함수를 추가로 실행합니다 .

  l(scope)

• 이것은 template에 새로운 노드를 추가 DOM하고 호출 하여 DOM에서 템플릿과 공유 controller되는 범위에 시계를 추가합니다 .

컴파일 대 링크 대 컨트롤러 비교 :

• 모든 지시문은 한 번만 컴파일 되며 재사용을 위해 링크 기능이 유지됩니다. 따라서 지시문의 모든 인스턴스에 적용 가능한 것이 있으면 지시문의 compile기능 내에서 수행해야합니다 .

• 이제 컴파일 후 템플릿 을 DOM에link 첨부하는 동안 실행되는 함수 가 있습니다 . 따라서 지시어의 모든 인스턴스와 관련된 모든 것을 수행합니다. 예를 들어 : 이벤트 첨부 , 범위에 따라 템플리트 변경 등

• 마지막으로, 컨트롤러 는 지시가 작동하는 동안 DOM(연결된 후) 작동하고 반응 할 수 있어야합니다 . 따라서:

  (1) 링크로 뷰 [ V ] (즉, 템플릿)를 설정 한 후 . MVC 에서 우리 $scope의 [ M ] 그리고 $controller우리의 [ C ]

  (2) 시계를 설정 하여 $ scope 와의 양방향 바인딩을 활용하십시오 .

  (3) $scope런타임 중에 템플릿을보고있는 것이기 때문에 컨트롤러에 시계가 추가 될 것으로 예상됩니다.

  (4) 마지막으로, controller관련 지시문들 사이에서 의사 소통을 할 수 있도록 사용됩니다. ( https://docs.angularjs.org/guide/directive의myTabs 예제 와 같이 )

  (5) 우리가이 모든 것을 link기능뿐만 아니라 우려의 분리에 대해서도 할 수 있다는 것은 사실이다 .

따라서 마지막으로 모든 조각에 완벽하게 맞는 다음을 얻습니다.

---

컨트롤러가 필요한 이유

The difference between link and controller comes into play when you want to nest directives in your DOM and expose API functions from the parent directive to the nested ones.

From the docs:

Best Practice: use controller when you want to expose an API to other directives. Otherwise use link.

Say you want to have two directives my-form and my-text-input and you want my-text-input directive to appear only inside my-form and nowhere else.

In that case, you will say while defining the directive my-text-input that it requires a controller from the parent DOM element using the require argument, like this: require: '^myForm'. Now the controller from the parent element will be injected into the link function as the fourth argument, following $scope, element, attributes. You can call functions on that controller and communicate with the parent directive.

Moreover, if such a controller is not found, an error will be raised.

Why use link at all

There is no real need to use the link function if one is defining the controller since the $scope is available on the controller. Moreover, while defining both link and controller, one does need to be careful about the order of invocation of the two (controller is executed before).

However, in keeping with the Angular way, most DOM manipulation and 2-way binding using $watchers is usually done in the link function while the API for children and $scope manipulation is done in the controller. This is not a hard and fast rule, but doing so will make the code more modular and help in separation of concerns (controller will maintain the directive state and link function will maintain the DOM + outside bindings).

---

The controller function/object represents an abstraction model-view-controller (MVC). While there is nothing new to write about MVC, it is still the most significant advanatage of angular: split the concerns into smaller pieces. And that's it, nothing more, so if you need to react on Model changes coming from View the Controller is the right person to do that job.

The story about link function is different, it is coming from different perspective then MVC. And is really essential, once we want to cross the boundaries of a controller/model/view (template).

Let' start with the parameters which are passed into the link function:

function link(scope, element, attrs) {

• scope is an Angular scope object.
• element is the jqLite-wrapped element that this directive matches.
• attrs is an object with the normalized attribute names and their corresponding values.

To put the link into the context, we should mention that all directives are going through this initialization process steps: Compile, Link. An Extract from Brad Green and Shyam Seshadri book Angular JS:

Compile phase (a sister of link, let's mention it here to get a clear picture):

In this phase, Angular walks the DOM to identify all the registered directives in the template. For each directive, it then transforms the DOM based on the directive’s rules (template, replace, transclude, and so on), and calls the compile function if it exists. The result is a compiled template function,

Link phase:

To make the view dynamic, Angular then runs a link function for each directive. The link functions typically creates listeners on the DOM or the model. These listeners keep the view and the model in sync at all times.

A nice example how to use the link could be found here: Creating Custom Directives. See the example: Creating a Directive that Manipulates the DOM, which inserts a "date-time" into page, refreshed every second.

위의 풍부한 소스 에서 가져온 짧은 스 니펫은 DOM을 사용한 실제 조작을 보여줍니다. $ timeout 서비스에 연결된 기능이 있으며, 메모리 누수를 피하기 위해 소멸자 호출 에서 지워집니다.

.directive('myCurrentTime', function($timeout, dateFilter) {

 function link(scope, element, attrs) {

 ...

 // the not MVC job must be done
 function updateTime() {
   element.text(dateFilter(new Date(), format)); // here we are manipulating the DOM
 }

 function scheduleUpdate() {
   // save the timeoutId for canceling
   timeoutId = $timeout(function() {
     updateTime(); // update DOM
     scheduleUpdate(); // schedule the next update
   }, 1000);
 }

 element.on('$destroy', function() {
   $timeout.cancel(timeoutId);
 });

 ...

참고 URL : https://stackoverflow.com/questions/20018507/angular-js-what-is-the-need-of-the-directive-s-link-function-when-we-already-ha