angularjs - Angular UI - UI-Router - 在子 ui-view 上传递数据和调用函数

Question

使用 Angular JS - UI 路由器，我需要从我的父 View project.details 到我的 subview project.details.tasks 进行通信。我的 subview 如何访问父 View 的范围？另外我希望我的父 View 能够在我的 subview 上调用函数吗？我怎样才能做到这一点？

这是我正在尝试做的粗略示例:

.state('project.details', {
        url: "/:id",
        template: '<a ng-click="[target-route??]>childFunction()">',
        controller: function($scope){
            $scope.parentString = "parent value";
        }
    })
.state('project.details.tasks', {
        url: "/tasks",
        templateUrl: "project.details.tasks.html",
        controller: function($scope){
           console.log("how do I get" + $scope.parentString + " here?";

           $scope.childFunction = function() { console.log('Parent calling');


        }
    })

Answer 1

这里其实有两个问题:

1)如何访问父级的$scope:

这可以通过使用$scope.$parent....简单地解决(解决方案由@ndpu提供)

2) 如何从父 View 中调用 subview 中的函数:

我为此找到的解决方案是创建一个共享服务，这里称为 broadcastService。父 View 和 subview 的 Controller 都注入(inject)此服务。这个服务使用$rootscope来广播事件，子 Controller 可以监听这个事件:

广播服务:

.factory('broadcastService', function ($rootScope) {
    var broadcastService = {};

    broadcastService.message = '';

    broadcastService.prepForBroadcast = function (msg) {
        this.message = msg;
        this.broadcastItem();
    };

    broadcastService.broadcastItem = function () {
        $rootScope.$broadcast('handleBroadcast');
    };

    return broadcastService;
});

注入(inject)上述共享服务的广播 Controller :

myApp.controller('projectTasksController', ['broadcastService', '$scope', function (broadcastService, $scope) {

        $scope.sendMessageToChildView = function () {
           broadcastService.prepForBroadcast("hello there");
        }
}]);

同时注入(inject)共享服务的接收 Controller :

.controller('projectsTaskListController', ['broadcastService', '$scope', function (broadcastService, $scope) {
        $scope.output = "";
        $scope.$on('handleBroadcast', function () {
            $scope.output = 'Received: ' + broadcastService.message;
        });

    }]);