Изоляция угловой директивной области

Question

Мне нужно зафиксировать событие изменения на моих ячейках (динамически заполненное), но только триггеры первого элемента функционируют «эврика». Кто-то знает, что я делаю неправильно?

Мой HTML:

  <div ng-controller="TreeCtrl"> 

       <tree family="treeFamily" done="eureka()"> 



       </tree> 

      </div> 

Вот мой контроллер:

module.registerController("TreeCtrl", function($scope) { 


    $scope.eureka = function() { 
     alert("it works!!"); 
    } 


    $scope.treeFamily = { 
     name : "Parent", 
     children: [{ 
      name : "Child1", 
      checked : true, 
      children: [{ 
       name : "Grandchild1", 
       children: [] 
      },{ 
       name : "Grandchild2", 
       checked : true, 
       children: [{ 
        name : "GrandGrandchild2", 
        checked : true, 
        children: [] 
       }] 
      },{ 
       name : "Grandchild3", 
       checked : false, 
       children: [] 
      }] 
     }, { 
      name: "Child2", 
      checked : true, 
      children: [] 
     }] 
    }; 


}); 

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

module.registerDirective("tree", function($compile) { 
     return { 
      restrict: "EA", 
      scope: { 
       ngModel: '=', 
       ngChange: '&', 
       done: '&', 
       family: '=', 
      }, 
      template: 
       '<p>{{ family.name }} <input type="checkbox" value="1" ng-model="family.checked" ng-change="done()"><button ng-click="done()">dsfdsfsd</button></p>'+ 
       '<ul>' + 
        '<li ng-repeat="child in family.children">' + 
         '<tree family="child"></tree>' + 
        '</li>' + 
       '</ul>', 
      compile: function(tElement, tAttr) { 
       var contents = tElement.contents().remove(); 
       var compiledContents; 
       return function(scope, iElement, iAttr) { 
        if(!compiledContents) { 
         compiledContents = $compile(contents); 
        } 
        compiledContents(scope, function(clone, scope) { 
          iElement.append(clone); 
        }); 
       }; 
      } 
     }; 
    }); 

Спасибо!

С наилучшими пожеланиями

Answer 1

Я сделал этот вид рекурсивной директивы вещь, прежде чем ... весело :). В любом случае, вы можете пройти через ссылку. т.е.

scope: { 
    ngModel: '=', 
    ngChange: '&', 
    done: '=', 
    family: '=', 
}, 

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

$scope.localDone = function(){ 
    $scope.done() // this is your ereka function 
}; 

и в вашем HTML пропуск делается ссылка

<tree family="treeFamily" done="eureka"> // no() 

и в шаблоне директивы вместо вызова сделать вызов, localDone

template: 
      '<p>{{ family.name }} <input type="checkbox" value="1" ng-model="family.checked" ng-change="localDone()"><button ng-click="done()">dsfdsfsd</button></p>'+ 

Надеюсь, это поможет!

Answer 2

Вы можете посмотреть этот пример, который использует требования и разделяет директивы.

http://jsfiddle.net/KRDEf/

Изменение области связывания с = по-видимому, проблема будет устранена, однако.

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

 
app.controller("TreeCtrl", function($scope) { 
 

 

 
    $scope.eureka = function() { 
 
    alert("it works!!"); 
 
    } 
 

 

 
    $scope.treeFamily = { 
 
    name: "Parent", 
 
    children: [{ 
 
     name: "Child1", 
 
     checked: true, 
 
     children: [{ 
 
     name: "Grandchild1", 
 
     children: [] 
 
     }, { 
 
     name: "Grandchild2", 
 
     checked: true, 
 
     children: [{ 
 
      name: "GrandGrandchild2", 
 
      checked: true, 
 
      children: [] 
 
     }] 
 
     }, { 
 
     name: "Grandchild3", 
 
     checked: false, 
 
     children: [] 
 
     }] 
 
    }, { 
 
     name: "Child2", 
 
     checked: true, 
 
     children: [] 
 
    }] 
 
    }; 
 

 

 
}); 
 

 
app.directive("tree", function($compile) { 
 
    return { 
 
    restrict: "EA", 
 
    scope: { 
 
     ngModel: '=', 
 
     ngChange: '&', 
 
     done: '=', 
 
     family: '=', 
 
    }, 
 
    template: '<p>{{ family.name }} <input type="checkbox" value="1" ng-model="family.checked" ng-change="done()">' +  '<button ng-click="done()">dsfdsfsd</button></p>' + 
 
     '<ul>' + 
 
     '<li ng-repeat="child in family.children">' + 
 
     '<tree family="child"></tree>' + 
 
     '</li>' + 
 
     '</ul>', 
 
    compile: function(tElement, tAttr) { 
 
     var contents = tElement.contents().remove(); 
 
     var compiledContents; 
 
     return function(scope, iElement, iAttr) { 
 
     if (!compiledContents) { 
 
      compiledContents = $compile(contents); 
 
     } 
 
     compiledContents(scope, function(clone, scope) { 
 
      iElement.append(clone); 
 
     }); 
 
     }; 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<div ng-controller="TreeCtrl" ng-app="app"> 
 

 
    <tree family="treeFamily" done="eureka()"> 
 
    </tree> 
 

 
</div>