在$rootScope和控制器之间切换布尔值的最佳方式

Question

我有一个位于ng视图上方的navbar指令。它使用$rootScope来触发事件以在某些视图中显示按钮。

我正在尝试向指令模板添加一个按钮，该按钮将在控制器中为特定视图切换布尔值。该视图显示了一段时间，每个时间段都有一个特定的布尔值，我想从指令中切换它。

布尔值保存在本地存储对象中，该对象在加载该特定视图的每次迭代时初始化。

首先，需要将值传达给指令，以便按钮可以显示为设置为true或false。切换开关时，该布尔值需要从指令通过$rootScope到达控制器，然后保存在存储对象中。

当视图发生更改时，整个过程需要重复。显然，开关需要能够多次打开和关闭。

目前，我正在将值从控制器发送到$rootScope，然后在指令链接函数中侦听该值。

然而，将$rootScope值返回到控制器的最佳方法是什么。我尝试设置$rootScope$在控制器中进行监视，它似乎可以在任何一个页面上工作，但在不同的时间段之间导航时，布尔值的$rootScope值没有正确重置。

我尝试在控制器初始化中重置值，如下所示：

$rootScope.booleanValue = false;

但这并没有奏效。

我也尝试过以下几种：

$scope.$on('$routeChangeSuccess', function (next, current) {
        $rootScope.booleanValue = false;
    });

但我无法让整个周期正常工作。$rootScope中的属性值似乎以前没有从视图中重置，然后在加载相邻的付款期视图时继续。

我希望这是有道理的。我会把你从太多的代码中拯救出来，因为我认为基本的想法就在这里。

Answer 1

您要做的是从navbar指令（一个隔离作用域）和视图的控制器共享状态。我建议您使用工厂提供商服务来共享该状态：

angular.module('myApp').factory('navbarState', function (){
    return {started: false}
});

在导航条指令中，注入服务并将状态存储在该服务中：

angular.module('myApp').directive('navigationBar', [
    '$rootScope',
    'navbarState',
    //'NavigationStackService',
    //'NavigationBarService',
    function ($rootScope, navbarState) {
        function link(scope, element) {
           scope.startEditMode = function(){
                console.log("Edit clicked");
                navbarState.started=true;
                //NavigationBarService.hideNavigationEdit();
                //NavigationBarService.showNavigationDone();
            };
            scope.finishEditMode = function(){
                console.log("Done clicked");
                navbarState.started=false;
                //NavigationBarService.hideNavigationDone();
                //NavigationBarService.showNavigationEdit();
            };
        }
        return {
            templateUrl: 'templates/navigation-bar.html',
            restrict: 'E',
            scope: {},
            link: link
        };
    }
]);

在视图控制器中，检索服务，将其放在控制器的作用域中，并在模板中使用它。

angular.module('myApp').controller('controller2', function(navbarState) {
    console.log("view controller2 started");
    var vm = this;
    vm.navState = navbarState;
    vm.message = "hello from ct2";
});

JSFiddle上的演示。