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：如何從子控制器

回答

相關問題