2014-04-12 9 views
6

AngularJS 지시문에 컨트롤러를 정의하는 두 가지 방법이 있다는 것을 알고 있습니다. 컨트롤러는 controller: 옵션을 사용하여 지시문 정의의 일부로 정의 할 수 있습니다. 또는 지시문 templateURL:'someview.html'의보기에 필수 컨트롤러가 포함될 수 있습니다. 누구나이 두 가지 옵션의 차이점과 사용시기를 설명 할 수 있습니까? 지시어 내에서AngularJS 지시문 제어기 정의

:

app.directive('myDirective', function() { 
    templateUrl: 'someview.html, 
    controller: 'MyController' ----> either here 
}); 

someview.html

<div ng-contoller='my-controller'> ----> or here 

</div> 

답변

4

지시어는 컨트롤러없이 휴식 경우, 다음 지시가 필요로하는 컨트롤러를 정의해야합니다. 이렇게하면 지시문과 컨트롤러간에 일대일 관계가 만들어집니다.

"BookingController"가 필요한 "Booking"지시문이 있다고 가정 해 봅시다. 예약 지시문을 사용해야 할 때마다 지시자와 컨트롤러를 지정하는 것이 개발자에게 중복됩니다. 따라서 지시문은 controller: "BookingController"을 정의 할 수 있으며 지시문을 사용할 때 AngularJS는 해당 제어기를 자동으로 인스턴스화합니다.

귀하의 지침이 일반적인 경우 어떻게됩니까? 예약 주문의 형식 만 처리하는 지시문이 있지만 여러 종류의 예약을 처리하는 컨트롤러가 많습니다. 이 경우 지시문은 컨트롤러를 정의하지 않습니다. 현재 범위에서 "예약 _ 번호"가 필요한 것만 정의합니다. 개발자는 예약을 처리하는 컨트롤러의 "아래"DOM에서 해당 지시어를 "사용"해야합니다.

지시어는 현재 범위를 게시하지만 현재 범위를 조작하지 않는 코드로 생각하는 것이 가장 좋습니다. 컨트롤러는 현재 범위를 조작하지만 범위가 게시되는 방법을 모르는 코드입니다. 뷰 (또는 HTML)는이 두 가지가 종속성 순서대로 함께 스냅 된 위치입니다.

1

지시문에 controller 키를 제공 할 때 중요한 차이점은 지시어의 컨트롤러가 다른 지시어에 의해 require 일 수 있다는 것입니다. 당신이 지시 외부 또는 다른 컨트롤러를 정의 된 경우

app.directive('tabs', function() { 
    return { 
    // ... 

    controller: function($scope, $element) { 
     this.addPane = function() { 
     // ... 
     }; 
    }, 

    // ... 
    }; 
}); 

app.directive('tab', function() { 
    return { 
    // ... 

    // require the controller from the `tabs` directive 
    // on a parent element 
    require '^tabs', 

    // required controller passed as fourth parameter 
    link: function(scope, elem, attrs, tabsController) { 
     tabsController.addPane(...); 
    } 
    }; 
}); 
<tabs> 
    <tab>...</tab> 
    <tab>...</tab> 
</tabs> 
2

당신이 컨트롤러 이름 따옴표 (" 또는 ')를 넣어 있는지 확인합니다 : 예를 들어, 다음 the AngularJS homepage의 하단에있는 두 개의 지침의 조각이다 이 오류가 표시됩니다

잘못된 :

controller: MyController 

올바른 :

controller: 'MyController' 

큰 차이가 있습니다. 두 번째 경우에는 컨트롤러가 부트 스트랩에 주입됩니다.