Невозможно получить доступ к изолированной области действия угловой директивы - PullRequest
Новая
       31

Невозможно получить доступ к изолированной области действия угловой директивы

0 голосов
/ 22 мая 2018

Первая директива: 

app.directive("myDirectiveOne", function($rootScope){
    return {
        templateUrl : "/custom-one-html.html",
        restrict: "AE", 
        replace:true,
        scope: {
            somedata: "=",
            flags: "=",
            functionone: "&"
        }
        ,controller: function($rootScope,$scope, $element) {
           $scope.firstFunction = function(){
                console.log("First function is getting called")
           }
$scope.$on('firstBroadcast',function(event, data){
                $rootScope.$broadcast('secondBroadcast', data)
            });

    }

Вторая директива: 

app.directive("myDirectiveTwo", function($rootScope){
    return {
        templateUrl : "/custom-two-html.html",
        restrict: "AE", 
        replace:true,
        scope: {
            data: "=",
            functiontwo: "&"
        }
        ,controller: function($rootScope,$scope, $element) {
           $scope.secondFunction = function(){
                console.log("Second function is getting called")
                $rootScope.$broadcast('firstBroadcast', {})
           }
$scope.$on('secondBroadcast',function(event, data){
                $scope.callSomeFunctionWithData(data);
            });
$scope.secondFunction();

    $scope.editFunction = function(x){
console.log("This is the edit function", x);
        }

Родительский контроллер: 

$scope.parentFuntion = function(){
        console.log("No trouble in calling this function")
}

Итак, проблема в том, что я пытаюсь вызвать функциюиз HTML-шаблона myDirectiveTwo активный контроллер является родительским, а не изолированным.

Может быть, это как-то связано с вещаниями, которые я использую?

HTML-код: 

<div ng-repeat="x in data">
    <h5>{{x.name}}</h5>
    <button ng-click="editFunction(x)">Edit</button>
</div>

Странно то, что я получаю значения данных и ng-repeatотлично работает на нагрузке.Но когда я нажимаю на кнопку, она ничего не делает.И если я добавлю ту же функцию в родительский контроллер, она будет вызвана .. :( Как мне снова сделать изолированный контроллер области видимости активным ..?

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Проблема заключалась в том, что я использовал устаревший метод replace:true.Это вызвало неожиданные сценарии. Как предложил @Protozoid, я посмотрел на его ссылку и обнаружил проблему. Цитирую официальную документацию:

When the replace template has a directive at the root node that uses transclude: element, e.g. ngIf or ngRepeat, the DOM structure or scope inheritance can be incorrect. See the following issues: Incorrect scope on replaced element: #9837 Different DOM between template and templateUrl: #10612

I удаленоreplace:true и все в порядке:)

Это ссылка: Здесь

0 голосов
/ 23 мая 2018

Проблема в том, что ng-repeat создает дочернюю область, поэтому editFunction оказывается в родительской области.

Из документов

... Каждый экземпляр шаблона получает собственную область видимости, где заданная переменная цикла установлена ​​на текущий элемент коллекции ...

Документы здесь

Вы можете убедиться, что это проблема, получив область действия элемента кнопки и проверив $ parent, как таковой angular.element(document.getElementsByTagName("button")).scope()

Хотя рассматривается запах кода , вы можете добавить $ parent к вашему вызову функции, чтобы получить к нему доступ, хотя имейте в виду, что теперь это накладывает зависимость на вашу HTML-структуру.

<button ng-click="$parent.editFunction(x)">Edit</button>

...