访问主控制器从指令

Question

范围内假设下面的蓝图代码：

<div ng-controller="myCtrl"> 
    <div ng-repeat="..."> 
     <div ng-repeat="..."> 
      <div ng-repeat="..."> 
       <div ng=if="..." my-directive> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>  

myApp.directive('myDirective', function() { 
    return {     
     controller: function($scope){ 
      console.log('controller scope'); 
      console.log($scope); 
     }, 
     link:function(scope,element){ 
      console.log('link scope'); 
      console.log(scope);  
     } 
    } 
}); 

在控制台输出都会指向由ng-if指令创建范围。我的问题是如何从指令中访问myCtrl的范围。当然不是使用$ parent。$ parent ....

Answer 1

使用服务在角度组件之间共享数据。这个问题可能是一个好的开始：Share data between AngularJS controllers。此方法可用于在控制器和指令之间共享数据

Answer 2

当您创建指令时，返回函数称为DDO（指令定义对象）。其中一个属性是'范围'。如果使用scope：true初始化它，指令将原型继承父范围。如果将scope设置为false，则该指令将使用父范围。最后，如果你设置范围{...}，它将创建一个隔离范围。

var app = angular.module("test",[]); 
 

 
app.controller("myCntrl",function($scope){ 
 
    $scope.text = "Im in controller Scope"; 
 
}); 
 
app.directive("myDirective", function(){ 
 
    return { 
 
     restrict: "EA", 
 
     scope: true, 
 
     template: "<div>Where are you, directive ? {{text}}</div>" 
 
    }; 
 
});

h2 { 
 
    cursor: pointer; 
 
} 
 
.directive { 
 
    border: 5px solid #F5BF6E; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<div ng-app="test"> 
 
    
 
    <div ng-controller="myCntrl"> 
 
     <h2 ng-click="reverseName()">Where are you ? {{text}}</h2> 
 
     <div my-directive class='directive'></div> 
 
    </div> 
 
</div>

您可以检查此链接查看更多细节：在指令使用require，像Directive Scopes

Answer 3

最简单的方法可能是：

<div ng-controller="MyCtrl"> 
    <div my-directive></div> 
</div> 


var myApp = angular.module("app", []); 

myApp.controller("MyCtrl", function($scope) { 
    this.text = "I am in Controller Scope"; 
    this.getValue = function() { return this.text; }; 
}); 

myApp.directive("myDirective", function() { 
    return { 
     require: "^ngController", 
     link: function(scope, elem, attrs, ngCtrl) { 
      elem.text(ngCtrl.getValue()); 
     } 
    }; 
}); 

编辑

在你的情况，我认为你可以在指令中使用控制器作用域变量和方法，使用作用域绑定&;下面的代码片段：

<div ng-controller="MyCtrl as vm"> 
    <my-directive on-get-value="vm.getValue()"> 
    </my-directive> 
</div> 

angular.module('app', []) 
.controller('MyCtrl', function($window) { 
    var vm = this; 
    vm.getValue = function() { $window.alert("I am in Controller Scope"); }; 
}) 
.directive('myDirective', function() { 
    return { 
    scope: { 
     onGetValue:'&' 
    }, 
    controllerAs:'vm', 
    controller: function($scope) { 
     $scope.onGetValue(); 
    } 
    }; 
});