Angular:从子节点修改父控制器

时间:2016-03-09 20:32:04

标签: javascript angularjs

在两个或多个子控制器必须为其父级提供附加功能的情况下,并且必须在父上下文中触发此功能,从小孩修改父级$scope是一种好习惯吗?

实施例

function ParentCtrl(){
  var vm = this;
  vm.customFn = function(){}
  vm.sharedFn = function(name){
    var msg = 'My name is';
    console.log(msg + ' ' + name);
  }
}

function ChildrenCtrl($scope){
  function customFn(){
    $scope.myParent.sharedFn('Batman');
  }
  $scope.myParent.customFn = customFn;
}

从模板致电:

<div ng-controller="ParentCtrl as myParent">
  <div ng-controller="ChildrenCtrl as myFirstChildCtrl">content</div>
  <div ng-click="myParent.customFn()">click me</div>
</div>

2 个答案:

答案 0 :(得分:2)

扩展@ chris的答案,你需要一个指令。指令旨在可重复使用。

.directive('myDirective', function(){
    return {
        scope: {
            clickMe: '&'
        },
        template: <div><button ng-click="clickMe({$data:myDirData})>click me</button></div>
})

在您的父UI模板中:

 <div>
     <div my-directive click-me="parentControllerFunc($data)"></div>
 </div>

请注意,您可以将数据从指令传递回父控制器的回调。

在父控制器的回调中,您可以根据参数分配逻辑:

$scope.parentControllerFunc = function($data){
    //do something specific to the $data
    //do something they ALL will do afterwards
}

答案 1 :(得分:0)

我可以看到你想在那里做什么,但这可能不是一个好习惯。如果你想要的是在一个父范围内继承属性的应用程序中重用一个控制器,或者有自己的独立范围,那么坚持使用directives。这就是他们的目的。