AngularJs 在指令中从另一个调用控制器

Question

我有一个Controller A，负责显示<body>中的数据。我还有另一个 Controller B，它位于显示导航的指令中。

我想将从 Controller B（比如一个字符串数组）接收到的数据传递给 Controller A，然后使 Controller A 调用方法将数据绑定到正文。

到目前为止，我已经想出了一个肮脏的解决方案：将数据存储在我的模块中的 var 变量中并通过单击按钮访问它。

有没有其他方法可以Controller B影响Controller A？

这是我的代码：

app.controller("Controller A", function($scope, $http){});

app.directive("Navigation", [function(){
return {
  restrict: "E",
  templateUrl: "navigation.html"
};
  }])
.controller("Controller B", function($scope, $http){});

谢谢。

Answer 1

您可以在指令中使用回调函数，只要您有一些数据要传递，指令的控制器就会调用该回调函数：

app.directive("navigation", [function() {
    return {
        restrict: "E",
        cb: '&cb',
        templateUrl: "navigation.html"
    };
}])
.controller("Controller B", function($scope, $http) {
    // Invoke the callback function passed to the directive
    // Of course this call can happen at any time of this
    // directive controller lifecycle
    $scope.cb('some data to pass to the callback function');
});

然后在呈现指令的控制器中定义此回调函数：

app.controller("Controller A", function($scope, $http) {
    $scope.callback = function(someData) {
        alert(someData);
    };
});

渲染指令时将传递的内容：

<div ng-navigation cb="callback"></div>

现在指令控制器可以将信息传递给呈现指令的原始控制器。

Answer 2

如果您需要这样的东西，对于不相关的范围，您可以使用服务或自定义事件。幸运的是 angular 使得处理自定义事件变得非常容易。

我updated your plunk 来展示这是怎么可能的。这是症结所在：

在你的指令中你这样做了。使用 $rootScope 确保事件到达您的整个应用程序。

$rootScope.$broadcast('navClick','data send')

然后在需要收听的地方做如下操作：

$scope.$on('navClick', function(ev,data) {console.log(data)})

少用这个技巧。过度使用它会使您很难遵循应用程序中的逻辑。

AngularJs 在指令中从另一个调用控制器

AngularJs calling Controller from another one in directive

javascript

controller

angularjs

angular-directive