当页面加载时在控制器之间传递数据，而不用在angularjs中使用$rootscope

Pass data between controllers while pageload without using $rootscope in angularjs

本文关键字：angularjs rootscope 加载 控制器 之间 数据      更新时间：2023-09-26

我有两个像这样的控制器，

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

管理员二:

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();

按钮点击或任何动作从用户i可以触发事件，但我的要求是，而页面加载，按钮不应该是可见的。当childMenu控制器执行时，父控制器按钮应该是可见的。我不想使用$broadcast，因为它需要$rootscope。

注意:我的控制器和html有数百行。我只是粘贴了这个功能所需的代码。ChildMenuController(childMenu.html)和ParentMenuController(parentMenu.html)有独立的html。

美元范围。showButton在ChildMenucontroller中不可用。这两个html都被用作指令。主html为index.html.

查看下面的示例:

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

预览

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

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
    };
});

它和你的代码完全一样，但是state现在是一个带有value属性的对象。状态对象总是相同的，这样当服务中的值发生变化时，这些变化就会传播到曾经请求过该对象的每个人。

实际上你的服务正在被调用，这段代码正在执行

$scope.showButton = MenuService.getStatus();

但是一旦你的child controller被加载，你只是设置状态，但为了显示按钮，你应该在设置后获取状态像这样，

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

这将设置按钮为true，它将被显示。

我已经用你的代码做了一个样本，请看看它

演示

相关文章：