javascript - 页面加载时在 Controller 之间传递数据，而不使用 angularjs 中的 $rootscope

Question

我有 2 个 Controller ，如下所示，

app.controller('ParentMenuController',
    function ($scope,MenuService) {
        $scope.contentLoaded = false;        
        $scope.showButton = false;
        $scope.showButton = MenuService.getStatus();
});

Controller 2:

app.controller('ChildMenuController',
    function ($scope,MenuService) {
        MenuService.setStatus(true);
});

服务:

app.factory('MenuService', function ($q,$http) {    
    var status= false;
    var setStatus=function(newObj){
        status=newObj;
    };

    var getStatus=function(){
        return status;
    };

    return {
        getStatus:getStatus,
        setStatus:setStatus
    };
});

我无法将状态设置为 true，但下面的代码行根本没有执行，因此状态始终为 false。

$scope.showButton = MenuService.getStatus();

单击按钮或用户执行任何操作时，我可以触发该事件，但我的要求是在页面加载时，按钮不应该可见。当 childMenu Controller 执行时，父 Controller 按钮应该可见。我不想使用需要 $rootscope 的 $broadcast。

注意:我的 Controller 和 html 有数百行。我刚刚在此处粘贴了此功能所需的代码。 ChildMenuController(childMenu.html) 有单独的 html，ParentMenuController(parentMenu.html) 有单独的 html。

因此 $scope.showButton 在 ChildMenucontroller 中不可用。两个 html 都用作指令。主要 html 是index.html。

Answer 1

查看此示例:

http://plnkr.co/edit/TepAZGOAZZzQgjUdSpVF?p=preview

您需要使用包装对象，以便更改它的属性而不是主对象。

app.controller('ParentMenuController',
    function ($scope,MenuService) {
        $scope.contentLoaded = false;
        $scope.showButton = MenuService.getStatus();
});

app.controller('ChildMenuController',
    function ($scope,MenuService) {
        MenuService.setStatus(true);
});

app.factory('MenuService', function ($q,$http) {    
    var status= {value:false};
    var setStatus=function(newObj){
        status.value=newObj;
    };

    var getStatus=function(){
        return status;
    };

    return {
        getStatus:getStatus,
        setStatus:setStatus
    };
});

它与您的代码完全相同，但状态现在是一个具有值属性的对象。状态对象始终是相同的，因此当服务中的值发生更改时，更改会传播到曾经请求过该对象的每个人。