Sử dụng "yêu cầu" trong Chỉ thị để yêu cầu Bộ điều khiển chính

Question

Tôi cố gắng "yêu cầu" bộ điều khiển chính (không phải chỉ thị) nhưng AngularJS trả về ngoại lệ. Mã này là như thế này:

JS

app.controller("myController", function ($scole) { 
    ... 
}); 

app.directive("myDirective", function ($q) { 
    return { 
     require: "^myController", 
     template: "", 
     link: function (scope, element, attrs, myCtrl) { 
      ... 
     } 
    }; 
}); 

HTML

<div ng-controller="myController as myCtrl"> 
    ... 
     <div my-directive>...</div> 
    ... 
</div> 

Lỗi

Error: [$compile:ctreq] Controller 'myController', required by directive 'myDirective', can't be found!

Tại sao?
Có thể, require tài sản phải được tham chiếu đến bộ điều khiển của chỉ thị?

Cảm ơn

Answer 1

Yêu cầu là sử dụng chỉ thị điều khiển khác trong chỉ thị khác, vui lòng tham khảo các ví dụ dưới đây

var App = angular.module('myApp',[]); 

//one directive 

App.directive('oneDirective',function(){ 

    return { 
     restrict: 'E', 
     controller:function($scope){ 

     $scope.myName= function(){ 
      console.log('myname'); 
      } 

     } 
    } 

}); 

    //two directive 

    App.directive('twoDirective',function(){ 

    return { 
     require:'oneDirective' //one directive used, 
     link : function(scope,ele,attrs,oneCtrl){ 
     console.log(oneCtrl.myName()) 
    } 

    } 

    }) 

Answer 2

Notation require: "^myController" có nghĩa là chỉ thị của bạn sẽ cố gắng truy cập vào một chỉ thị gọi là myController và xác định trên một số thẻ tổ tiên như my-controller thuộc tính hoặc <my-controller> thẻ. Trong trường hợp của bạn, bạn không có chỉ thị như vậy, do đó ngoại lệ.

Đây không phải là rất thông thường những gì bạn đang cố gắng để làm, nhưng nếu bạn thực sự muốn yêu cầu điều khiển bên ngoài trong Chỉ thị của bạn, bạn có thể yêu cầu ngController:

app.directive("myDirective", function($q) { 
    return { 
     require: "^ngController", 
     template: "", 
     link: function(scope, element, attrs, myCtrl) { 
      // ... 
      console.log(myCtrl); 
     } 
    }; 
}); 

Tuy nhiên, đây không phải là ý tưởng rất tốt . Tôi không thể tưởng tượng tại sao bạn có thể cần nó như thế này. Tôi sẽ khuyên bạn nên xem xét các thuộc tính cấu hình scope và cách bạn có thể chuyển các tham chiếu hàm thực thi vào chỉ thị của bạn từ bộ điều khiển bên ngoài.

<div my-directive some-callback="test()"></div> 

và trong chỉ thị xác định phạm vi:

scope: { 
    someCallback: '&' 
} 

nơi nào trên bộ điều khiển bạn sẽ phải $scope.test = function() {};. Sau đó, bạn sẽ không cần phải yêu cầu điều khiển một cách rõ ràng trong chỉ thị.