使用隔离范围调用嵌套指令的父控制器的功能

Question

我有一个treeview指令，我试图从父控制器调用一个函数，我似乎无法获得调用的函数。我不确定是否由于树视图的结构和子元素的嵌套或者什么。

在我的HTML我有指令声明：

<div ng-controller="treeController as vm"> 
    <tree src="myList" filter="doSomething()"></tree> 
    <a ng-click="clicked()"> link</a> 
</div> 

我在指令中声明的特性/参数filter它应该叫主控制器内的doSomething()功能。

主控制器包含以下代码（测试来构建树以及调用该函数。

app.controller("treeController", ['$scope', function($scope) { 

    var vm = this; 

    $scope.doSomething = function() { 
     var item = data; 
    } 

    $scope.clicked = function() { 
     alert('clicked'); 
    } 

     $scope.myList = { 
      children: [ 
       { 
        name: "Event", 
        children: [ 
        { 
         name: "Event Date", 
         children: [ 
          { 
           name: "2008", 
           FilterType: '_eventStartDate', 
           Parent: '_event' 
          }, 
          { 
           name: "2009", 
           FilterType: '_eventStartDate', 
           Parent: '_event' 
          } 
         ] 
        }, 
        { 
         name: "Event Attendee", 
         children: [ 
          { 
           name: "Person 1", 
           FilterType: '_eventAttenddeeName', 
           Parent: '_Event' 
          }, 
          { 
           name: "Person 2", 
           FilterType: '_eventAttenddeeName', 
           Parent: '_Event' 
          } 
         ] 
        } 
        ] 
       }] 
     }; 
}]); 

的我的指令中我声明的分离的范围，以及所述参数filter（第二应用.directive），我与模型绑定前缀'&'前缀。在模板中我然后调用NG单击应调用该函数DoSomething的（）主控制器内。但是......没有骰子。

app.directive('tree', function() { 
//builds the tree 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      t: '=src' 
     }, 
     template: '<ul><branch ng-repeat="c in t.children" src="c"></branch></ul>' 
    }; 
}); 

app.directive('branch', function($compile) { 
//directive that builds the children/branches 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      b: '=src', 
      filter: '&' 
     }, 
     template: '<li><input type="checkbox" ng-click="filter()" ng-hide="visible" /><a>{{ b.name }}</a></li>', 
     link: function (scope, element, attrs) { 

      var has_children = angular.isArray(scope.b.children); 
      scope.visible = has_children; 
      if (has_children) { 
       element.append('<tree src="b"></tree>'); 

       $compile(element.contents())(scope); 
      } 

      element.on('click', function(event) { 
       event.stopPropagation(); 

       if (has_children) { 
        element.toggleClass('collapsed'); 
       } 
      }); 
      //test to call function within directive 
      //scope.doSomething = function(b) { 
      // alert('test'); 
      //} 
     } 
    }; 
}); 

我发布了publi c jsFiddle与工作代码样本以及

对我错过了什么的任何建议？

现在我只是试图调用该方法，但最终我需要将所选项目的参数传递回控制器，但现在我只是想弄清楚为什么我的控制器中的函数将不会被调用。

在此先感谢

更新： 有人建议到过滤器的声明，从分支移动到树指令。

我更新了我的代码，所以本地的树指令看起来类似如下：

app.directive('tree', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      t: '=src', 
      filter: '&' 
     }, 
     template: '<ul><branch ng-repeat="c in t.children" src="c"></branch></ul>' 
    }; 
}); 

注：滤波器参数从二级指令删除。产量没有变化。控制器内的功能仍未被调用。

Answer 1

你的树指令没有过滤method.your分支指令仅具有性能

<div ng-controller="treeController as vm"> 
    <tree src="myList" filter="doSomething()"></tree> 
    <a ng-click="clicked()"> link</a> 
</div> 

app.directive('tree', function() { 
//builds the tree 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      t: '=src', 
      filter: '&' 
     }, 
     template: '<ul><branch ng-repeat="c in t.children" src="c" filter="doSomething()"></branch></ul>' 
    }; 
}); 

app.directive('branch', function($compile) { 
//directive that builds the children/branches 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      b: '=src', 
      filter: '&' 
     }, 
     template: '<li><input type="checkbox" ng-click="filter()" ng-hide="visible" /><a>{{ b.name }}</a></li>', 
     link: function (scope, element, attrs) { 

      var has_children = angular.isArray(scope.b.children); 
      scope.visible = has_children; 
      if (has_children) { 
       element.append('<tree src="b"></tree>'); 

       $compile(element.contents())(scope); 
      } 

      element.on('click', function(event) { 
       event.stopPropagation(); 

       if (has_children) { 
        element.toggleClass('collapsed'); 
       } 
      }); 
      //test to call function within directive 
      //scope.doSomething = function(b) { 
      // alert('test'); 
      //} 
     } 
    }; 
}); 

Answer 2

更新： 孙大信的评论让我正确的道路这里是更新指令的主要问题对我来说是我正在使用嵌套指令，所以嵌套的项目（这是进行函数调用）超出了控制器的范围，以纠正这包括Sundar的更改，但要使嵌套指令工作，我必须明确地设置控制器在父指令级别。如果您需要在应用的多个区域使用指令，我意识到这不是一个好的选择。但是对于我来说，这个指令只用在一个地方，所以这个解决方案可以工作如果有人有任何其他建议或更好的方法，我会感激他们。

app.directive('tree', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      t: '=src', 
      filter: '&' 
     }, 
     controller:'treeController', //explicitly set the controller of the parent directive 
     template: '<ul><branch ng-repeat="c in t.children" src="c" filter="doSomething(data)"></branch></ul>' 
    }; 
}); 

app.directive('branch', function($compile) { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      b: '=src', 
      filter: '&' 
     }, 

     template: '<li><input type="checkbox" ng-click="innerCall()" ng-hide="visible" /><a>{{ b.name }}</a></li>', 
     link: function (scope, element, attrs) { 

      var has_children = angular.isArray(scope.b.children); 
      scope.visible = has_children; 
      if (has_children) { 
       element.append('<tree src="b"></tree>'); 

       $compile(element.contents())(scope); 
      } 

      element.on('click', function(event) { 
       event.stopPropagation(); 

       if (has_children) { 
        element.toggleClass('collapsed'); 
       } 
      }); 
      scope.innerCall = function() { 
       scope.filter(scope.b); 
      } 
     } 
    }; 
});