2013-08-07 3 views
2

HTML GUI 또는 UI 구성 요소를 캡슐화하는 데 사용되는 사용자 지정 요소 지시문을 작성하고 있습니다.angularjs에서 구성 요소와 유사한 지시자와 별도의 컨트롤러가 필요합니까?

app.directive('addresseseditor', function() { 
    return { 
     restrict: "E", 
     scope: { 
      addresses: "=" 
     }, // isolated scope 
     templateUrl: "addresseseditor.html", 
     link: function(scope, element, attrs) { 

      scope.addAddress= function() { 
       scope.addresses.push({ "postCode": "1999" }); 
      } 

      scope.removeAddress = function (index) { 
       scope.addresses.splice(index, 1); 
      } 

     } 
    } 
}); 

이 방법을 정의하는 link 기능을 올바른 위치가 아니면 ng-controller를 사용하여 별도의 컨트롤러 객체를 생성하는 것이 좋습니다 : 나는 같은 내 link 기능에 사용자 지정 방법 (즉, 등 ng-click 이벤트를 처리)를 추가하고 그리고 거기에 방법을 정의?

답변

3

원하는 경우 지시어 당 컨트롤러를 정의 할 수도 있습니다. 가장 큰 차이점은 지시자가 컨트롤러를 공유 할 수 있고 (컨트롤러를 공유 할 수 있음), 컨트롤러는 컴파일 전에 실행되고 컨트롤러는 주입된다는 것입니다. 나는 이것이 받아 들여지는 연습이라고 생각한다.

app.directive('addresseseditor', function() { 
return { 
    restrict: "E", 
    scope: { 
     addresses: "=" 
    }, // isolated scope 
    templateUrl: "addresseseditor.html", 
    controller: function($scope, $element, $attrs) { 

     $scope.addAddress= function() { 
      $scope.addresses.push({ "postCode": "1999" }); 
     } 

     $scope.removeAddress = function (index) { 
      $scope.addresses.splice(index, 1); 
     } 

    } 
} 
}); 

링크와 컨트롤러를 둘 다 가질 수 있지만 컴파일 된 것을 알고 있기 때문에 링크에 DOM 항목을 넣고 싶습니다.

이 방법은 여전히 ​​지침의 일부이므로 분리 된 상태로 유지됩니다. 지침에

+0

감사합니다. "지시문이 컨트롤러를 (같은 레벨에서) 공유 할 수 있음"을 명확히 할 수 있습니까? – matra

+0

물론, 링크 함수의 네 번째 인수는 실제로 컨트롤러입니다. 이 인수는 같은 요소에있는 다른 지시어가'require' 속성과 함께 컨트롤러를 정의 할 때 사용할 수 있습니다 (실제로 필자는 require를 사용해야한다고 확신하지 못합니다. 고전적인 예제는'ng-model'이며'ngModelController'를 제공합니다. 동일한 요소에 있으면 교차 지시문 통신을위한 방법을 제공합니다. –

0

이 컨트롤러를 컨트롤러 &보기와 영구적으로 연결하는 경우 실제로 배치하는 것이 중요하지 않습니다.

그러나 언젠가 다시 사용할 수 있도록 지시문을 분리하려는 경우 어떤 기능을 포함시켜야하는지 생각해보십시오.

0

guide

링크 기능은 DOM을 업데이트뿐만 아니라 DOM 리스너를 등록 할 책임이있다. (...) 지시어 로직 의 대부분이 입력됩니다.

DOM을 많이 조작하는 지시문을 작성해야만 그 문장의 마지막 부분을 따라갈 것입니다. 모든 지시문이 일부 기능을 가진 템플릿을 렌더링 할 때 나는 필요한 모든 기본 DOM 조작과 지시문의 논리를 캡슐화하는 controller 함수를 수행하기 위해 link 함수를 사용합니다. 그런 식으로 제가 일들을 명확하게 분리하여 (범위 조작으로부터 DOM을 조작) "뷰 컨트롤러 (view-controller)"와 일치하는 것처럼 보입니다.

FWIW, 나는 이러한 것들을 염두에두고 첫 번째 오픈 소스 지침을 구현했으며 소스 코드는 here입니다. 잘하면 그것은 어떻게 든 당신을 도울 것입니다.

0

요소 기능을 '인스턴스'로 링크 기능에 배치하려면 요소의 지시문에 걸쳐 API를 작성하려면 마스터 Rowny가 제안한 것처럼 제어기 기능을 작성하십시오.

관련 문제