Question

我使用ng-view在主网页中显示视图。这个视图有它自己的控制器，在那里我填充ui-grid数据。在我的外页我有导入/导出按钮，看起来他们使用应用程序的控制器。那么如何从应用程序的控制器中访问其控制器内的视图数据（它的网格对象）呢？

我正在使用Angular 1。

<body ng-app="myApp" ng-controller="myController" style="background-color: yellow;">

    <!-- the header that the entire app will use no matter what view is displayed -->
    <div ng-include="'Views/header.htm'"></div>
    <div style="height: 100%;" ng-view></div>
</body>

我在header.htm中有一个按钮。当它被按下时，它似乎在myApp范围内，因为它是被引发的函数。在内部，我需要告诉控制器被加载的任何视图。

Answer 1

您可以使用$ broadcast服务让您的视图控制器了解app控制器中的点击事件。

angular.module('app').controller('AppController', ['$scope', '$rootScope', function($scope, $rootScope){

    $scope.exportList = function() {
        $rootScope.$broadcast('exportData', { object: test}); // If data needs to be passed you can pass it in event
    };
}])

angular.module('app').controller('ViewController', ['$rootScope', function($rootScope){

    $rootScope.$on('exportData', function(event, data){
        if(data.object) {
            // Export logic here
        }
    });
}])

在视图中按住ng-click调用exportLink功能。

您已经提到过，您的数据是从ViewController以ui-grid填充的，因此您不需要从视图中传递参数，因为您已经在$ scope变量中使用了它。如果需要，请使用如图所示的事件参数。

Answer 2

您可以使用broadcast将事件发送到子范围，然后使用on进行回听。还有另外一个，$ emit。由于你想要将事件/消息传递给子范围/向下，你必须使用广播，$ emit是相反的。

请记住：$ emit通过范围层次结构向上调度事件，而$ broadcast将事件向下调度到所有子范围

<强> myController.js

$scope.buttonClick = function() {
    $rootScope.$broadcast('pass-event');
}

收到活动

ViewController.js （例如）

$rootScope.$on('pass-event', function (event, args) {
     // do what you want to do
});

从Angular中的app控制器访问视图控制器数据

2 个答案: