從AngularJS的父控制器調用指令控制器的方法

我正在使用AngularJS，我有一個指令，它有自己的控制器。它繼承了父控制器的範圍。從AngularJS的父控制器調用指令控制器的方法

作爲一個例子，考慮以下因素：

function ParentCtrl() { 
    $scope.aMethod = function() { 
     // DO SOMETHING 
    }; 
} 

function ChildCtrl() { 
    $scope.bMethod = function() { 
     // DO SOMETHING ELSE 
    } 
}

現在，ParentCtrl的$scope.aMethod（）由NG點擊指令觸發。我想要做的是調用ChildCtrl（）的$scope.bMethod。我該怎麼做？

編輯：一些更多的信息。與ParentCtrl關聯的模板有一個按鈕和多個指令。每個指令都會使用不同的輸入集來加載表單。當單擊ParentCtrl模板中的按鈕時，指令將通過ng-switch on和ng-switch-when一個接一個加載。
當用戶單擊該按鈕時，屬於該指令的ChildCtrl用於將數據存儲在其各自的表單中。
因此，單擊按鈕時：
1. ChildCtrl保存與已加載的當前指令關聯的模型。
2. ParentCtrl加載系列中的下一個指令。
ng-click被綁定到與ParentCtrl關聯的按鈕。但是，當點擊該按鈕時，ChildCtrl還需要執行一些操作（保存表單數據）。如何做到這一點？

來源

2013-03-01 callmekatootie

你不能。但是一個父級範圍屬性上的服務或'$ watch'可以完成同樣的事情。你能提供一個關於你的用例的更多細節嗎？ – 2013-03-01 19:10:53

@JoshDavidMiller當然。編輯我的問題，以反映相同的... – callmekatootie 2013-03-01 19:29:29

你可以發佈一個超級簡單的蹲點，確定核心問題空間？ – 2013-03-01 19:56:53

請看下面的內容。

我正在使用$broadcast的概念。我已經厭倦了複製的情況下，您給了像父控制器，子指令有自己的控制器等：

var animateAppModule = angular.module('animateApp', []) 
 
animateAppModule.controller('tst', function($scope) { 
 
    $scope.test = function() { 
 
    $scope.$broadcast('clickMessageFromParent', { 
 
     data: "SOME msg to the child" 
 
    }) 
 
    } 
 
}).directive('myDirective', function() { 
 
    return { 
 
    controller: function($scope) { 
 

 
    }, 
 
    link: function($scope, element) { 
 
     $scope.$on('clickMessageFromParent', function(scopeDetails, msgFromParent) { 
 
     //console.log(msgFromParent) 
 
     element[0].innerHTML = msgFromParent.data; 
 
     }) 
 
    } 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller="tst"> 
 
    <input type="button" ng-click="test()" value="click" /> 
 
    <div my-directive="somvalue"></div> 
 
</div>

JSFiddle

來源

2013-03-01 19:42:38 rajkamal

我還沒有嘗試過，但我看到這個問題。我有多個指令將按順序加載，也就是說，單擊按鈕時，會加載一個新指令。如果所有指令都響應'clickMessageFromParent'事件，那麼它將不可行。我只想要當前的子控制器作出響應 - 是否會如此？ – callmekatootie 2013-03-01 19:54:36

聽衆只需連接到只有你想要從父.. – rajkamal 2013-03-01 20:05:29

那精美的作品調用來自控制器的指令來聽的指令。 – 2014-02-14 03:13:40

這類似於rajkamal是說，因爲您需要使用廣播...但是您需要動態更改廣播以將其指定給您需要的任何孩子。

Here is a plunker showing an example

而這裏的代碼：

app.controller('MainCtrl', function($scope) { 

    // a method that broadcasts to a selected child. 
    $scope.broadcastToSelectedChild = function(){ 
    $scope.$broadcast('call-' + $scope.broadcastTo); 
    }; 
}); 

app.directive('testDir', function(){ 
    return { 
    restrict: 'E', 
    scope: { 
     'name': '@' 
    }, 
    template: '<div>{{name}} called: {{called}}</div>', 
    link: function(scope, elem, attr) { 

     scope.called = false; 

     //a child function to call. 
     scope.childFunction = function(){ 
     scope.called = true; 
     }; 

     //set up the name to be used as the listened to event. 
     var removeOn; 
     scope.$watch('name', function(v) { 
     if(removeOn) removeOn(); 
     removeOn = scope.$on('call-' + scope.name, function(){ 
      scope.childFunction(); 
      }); 
     }); 
    } 
    }; 
});

，在這裏它是在HTML：

<div ng-controller="MainCtrl"> 
    <test-dir name="test1"></test-dir> 
    <test-dir name="test2"></test-dir> 
    <test-dir name="test3"></test-dir> 
    <select ng-model="broadcastTo" ng-options="x as x for x in ['test1', 'test2', 'test3']"></select> 
    <button ng-click="broadcastToSelectedChild()">test</button> 
    </div>

我在這裏所做的就是創建一個機制，通過它我可以說出我的指令，然後通過名字廣播給他們。如果代碼不是自我解釋，請告訴我。我希望這有幫助。

來源

2013-03-01 20:43:41

從AngularJS的父控制器調用指令控制器的方法

回答

相關問題