AngularJS：如何从子控制器

我有一个简单的父/子控制器设置更新指令范围如下：AngularJS：如何从子控制器

<body ng-controller="ParentCtrl"> 

    <section my-directive></section> 

    <div ng-controller="Child1Ctrl"> 
     <button ng-click="child1()">Click Child1</button> 
    </div> 

    <br> 

    <div ng-controller="Child2Ctrl"> 
     <button ng-click="child2()">Click Child2</button> 
    </div> 

</body>

当我点击任一按钮，从儿童 Ctrl键或儿童 Ctrl，我希望我的指令中的范围得到更新。

myDirective.js

app.directive('myDirective', function() { 

    var slider = { 
     initial : function() { 
      slider.clear(); 
      $scope.slideHide = false; 
      $scope.slideShow = false; 
     }, 
     clear: function() { 
      $scope.slideMessage = ''; 
      $scope.slideError = false; 
      $scope.slideSuccess = false; 
     }, 
     error: function(message) { 
      $scope.slideShow = true; 
      $scope.slideError = true; 
      $scope.slideMessage = message; 
     }, 
     success: function(message) { 
      $scope.slideShow = true; 
      $scope.slideSuccess = true; 
      $scope.slideMessage = message; 
     } 
    } 

    return { 
     restrict: 'A', 
     replace: true, 
     transclude: true, 
     template: '<section class="slide">' + 
       '<div data-ng-class="{\'slide-show\' : slideShow, \'slide-error\' : slideError, \'slide-success\' : slideSuccess, \'slide-hide\' : slideHide}">' + 
        '<p>{{ slideMessage }}</p>' +       
       '</div>' + 
      '</section>' 
      } 
     } 
    );

而且我的孩子控制器内拨打：

app.controller('Child1Ctrl', function($scope) { 
    $scope.child1 = function() { 

     $scope.$parent.slider.initialise(); 

    } 
}); 

app.controller('Child2Ctrl', function($scope) { 
    $scope.child2 = function() { 

     $scope.$parent.slider.success('Display some text'); 

    } 
});

更新与小提琴：

http://jsfiddle.net/6uub3jqx/1/

如果您单击第一组按钮，将出现红色/绿色功能区。

如果您点击带有child1/2控制器的按钮，则不会执行任何操作。

解决方案：

见琴：http://jsfiddle.net/6uub3jqx/2/

本质孩子应该派：

$scope.successChild1 = function(msg) { 
    $scope.$emit('successCh1', 'Some data'); 
};

和家长应该接受：

$scope.$on('successCh1', function (event, data) { 
    $scope.$broadcast('success', data); 
});

rootscope会是更好的选择吗？

来源

2015-07-28 Oam Psy

@pixelbits - 感谢您的信息，您能提供一个例子吗？ –

@pixelbits你是什么意思？ “谈话很便宜，给我代码。” – Vidul

@ CPH4 - 您上面评论的好处是什么？ –

这取决于。您可以使用角events或（IMO更好的方法），它保留了状态，例如一个服务：

.factory('myOwnScope', function() { 
    return {}; 
}); 

// include myOwnScope as dependency and share the information 
// between controllers and directive by its properties 
// (any Angular service is just a singleton)

来源

2015-07-28 09:10:20 Vidul

谢谢，但我很努力地看到这是如何适应我上面分享的整个解决方案。 –

请检查这些[答案]（http://stackoverflow.com/questions/17470419/angularjs-shared-state-between-controllers）。 – Vidul

请看更新的小提琴。 –

有几种方法可以做到这一点。哪种方式最好取决于你试图达到的目标。

一种可能性是向指令中注入数据。然后你不需要$ parent变量。

它会去像这样（但不能garantee它的作品，因为你没有一个plunker或类似的东西）

在你的HTML：

<section my-directive mytext="myobject.mymessage"></section>

在你的控制器：

$scope.myobject = { mymessage: 'hi there' };

在你的指令：

return { 
    restrict: 'A', 
    scope: { mytext: '=' } 
    template: '{{mytext}}' 
}

来源

2015-07-28 10:30:46

我在更新中附加了jsFiddle，请参阅上面的内容 –

AngularJS：如何从子控制器

回答

相关问题