Question

我的控制器是 -

var App = angular.module("App",[]);
App.controller("MainController",['$scope',function($scope){
   $scope.getDetail = function(){
      console.log("get detail call from main controller");
   }
}]);

指令是 -

App.directive('customDirective',[function(){
   return {
      restrict : 'EAC',
      scope : {
      },
      template :'<div><button type="button">click here to get detail</button></div>',
     link : function(scope,element,attribute){

     }
   };
}]);

页面HTML是 -

 <div ng-controller="MainController">
        <custom-directive></custom-directive>
    </div>

我试图通过单击custom指令内的按钮来调用MainController中的getDetail。

Answer 1

您是否听说过隔离范围..这是连接控制器和嵌套指令之间的连接方式

    <div ng-controller="MainController">
            <custom-directive="getDetail()"></custom-directive>
    </div>

var App = angular.module("App",[]);
App.controller("MainController",['$scope',function($scope){
   $scope.getDetail = function(){
      console.log("get detail call from main controller");
   }
}]);

App.directive('customDirective',[function(){
   return {
      restrict : 'EAC',
      scope : {
        customDirective:'&'
      },
      template :'<div><button type="button" ng-click="heyimclick()">click here to get detail</button></div>',
     link : function(scope,element,attribute){
           scope.heyimclick=function(){
                 customDirective();
             }
     }
   };
}]);

Answer 2

有两种可能的方式：

家长控制器范围
隔离范围

父控制器范围

默认情况下，您编写的任何指令都可以访问父控制器范围，这意味着该指令可以直接调用父控制器函数而不会有任何额外的麻烦。要以这种方式执行任务，您的指令代码应该是这样的：

App.directive('customDirective',[function(){
   return {
      restrict : 'EAC',
      template :'<div><button type="button" ng-click="getDetail()">click here to get detail</button></div>',
     link : function(scope,element,attribute){
          //Call the controller function directly in using the scope object
     }
   };
}]);

在这种技术中，指令可以访问父控制器的整个范围，指令可以直接使用父控制器范围。如果您只想将指令专门用于一个控制器，则此方法非常有用，因为这会使指令的可重用性降低。

隔离范围

另一种更好的编写指令的方法是隔离范围技术。在这种情况下，指令不能直接访问父控制器范围，并且指令要访问的函数将传递给它。可以认为这种方法在两个陆地区域之间存在墙壁，并且在陆地之间仅允许选择性进入。要使用此技术，您的代码如下：

调用指令的HTML代码：

<div ng-controller="MainController">
        <custom-directive detail-function="getDetail()"></custom-directive>
</div>

Direcitve Block：

App.directive('customDirective',[function(){
   return {
      restrict : 'EAC',
      scope : {
          detailFunction='&'
      },
      template :'<div><button type="button" ng-click='detailFunction()'>click here to get detail</button></div>',
     link : function(scope,element,attribute){

     }
   };
}]);

以下链接包含您问题的演示。 Sample Code

Referene

Creating Custom AngularJS Directives Part 2 – Isolate Scope

如何在指令模板中点击元素来调用控制器中的方法

2 个答案:

父控制器范围

隔离范围