动态创建元素的AngularJs调用控制器功能

Question

i have one controller and want to create dymanically element.When i create it the element should call the controller function ,but the function is not called

app.controller('AbnTestController', ['$scope','$timeout',function($scope,$timeout) {
 ..........................
var tree1;
tree1 = [
  {
    label: 'test1',
    id:'1',
    type:'t',

  }];
  return $scope.addnew= function() {
  .........
   something

};

In my directive ,i create dynamic element;

app.directive('mytree', [
'$timeout', function($timeout) {
  return {
    restrict: 'E',
    controller: function($scope) {
      $scope.launch = function (mn) {........something.....}},

     template: "<a ng-click='addnew()'>Click</a>",
    replace: true,
    scope: {
      treeData: '=',
      onSelect: '&',    
      initialSelection: '@',
      treeControl: '='
    } 
    ...........
    }}]);

I want to call 'addnew' function from dynamically created element.

Answer 1

Each directive has an isolated scope.

That means that the 'addNew' function is not available in the scope the directives template is in.

To accomplish this you can add the following line to the 'scope' property of your directive definition:

addNew: '&'

This will bind the scope property to the one of original scope (see: https://docs.angularjs.org/guide/directive )

Your directive should look like this:

app.directive('mytree', [
 '$timeout', function($timeout) {
  return {
restrict: 'E',
controller: function($scope) {
  $scope.launch = function (mn) {........something.....}},

 template: "<a ng-click='addnew()'>Click</a>",
replace: true,
scope: {
  treeData: '=',
  onSelect: '&',    
  initialSelection: '@',
  treeControl: '=',
  addNew: '&'
} 
...........
}}]);