从不同的控制器更新 ng-show

Question

我想弄清楚如何在状态更改时更新我的 ng-show 变量。在我的默认 index.html 文件中，我有：

<div id="searchBar" ng-show="searchBar" ng-controller="mainController"></div>

因为这不是我的 page1 模板的一部分，所以 searchBar 不会在状态更改时更新。变量实际上正在正确更改，但 ng-show 不知道这一点。

我知道 angular，但是有没有人有任何建议让 ng-show 在控制器中更改时注意到 searchBar 中的更改？

var routerApp = angular.module('app', ['ui.router'])
    .service('MainShared', function () {
        var MainShared = this;
        MainShared.searchBar = false;
    })
    .controller('mainController', function($scope, MainShared) {
        $scope.searchBar = MainShared.searchBar;
    });

routerApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/page1');

    $stateProvider
        .state('page1', {
            url: '/page1',
            templateUrl: 'pages/templates/page1.html', 
            controller: 'page1' 
        });
});

routerApp.controller('page1', function($scope, $http, $state, MainShared) {

    MainShared.searchBar = true;

});

编辑：让大家知道，从下面的答案中，您不需要有服务来做到这一点。

Answer 1

使用$rootScope

.controller('mainController', function($scope, $rootScope) {
    console.log($rootScope.searchBar);
});


routerApp.controller('page1', function($scope, $rootScope, $http, $state) {
    $rootScope.searchBar = true;
});

Answer 2

parentScope.show = 1;
childScope.show = 2;

不会工作。（第二条语句不会更新父作用域中的值）

parentScope.object = {};
parentScope.object.show = 1;
childScope.object.show = 2;

会起作用的。（第二条语句将更新父作用域中的值）

所以只需将 'searchbar' 放入范围内的其他对象中即可。

从不同的控制器更新 ng-show

Updating ng-show from different controller

javascript

angularjs

angularjs-ng-show