AngularJs在指令中从另一个调用Controller

时间:2016-04-24 12:01:17

标签: javascript angularjs controller angular-directive

我有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){});

谢谢。

2 个答案:

答案 0 :(得分:0)

您可以在指令中使用回调函数,只要您有一些数据要通过,指令的控制器就会调用它:

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>

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

答案 1 :(得分:0)

如果您需要这样的内容,对于不相关的范围,您可以使用服务或自定义事件。 幸运的角度使得使用自定义事件非常容易。

updated your plunk 来说明这是可能的。这是关键所在:

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

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

然后你需要听它,你会做类似的事情:

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

稀疏地使用这种技术。过度使用此功能会使您难以遵循应用中的逻辑。