доступа Объем главного контроллера от внутри директивы

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 (объект, определяющий директиву). Одним из его атрибутов является «область». если вы инициализируете его с областью действия: true, директива будет прототипически наследовать родительскую область. Если вы установите область: 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>

Вы можете проверить эту ссылку для получения более подробной информации: Directive Scopes

Answer 3

Самый простой способ может быть с помощью require в директиве, как:

<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()); 
     } 
    }; 
}); 

EDIT

В вашем случае, я думаю, вы могли бы использовать переменные и методы области управления в директиве, используя привязку области видимости с помощью &; нижеприведенный снимок:

<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(); 
    } 
    }; 
});