javascript - 从不同的 Controller 更新 ng-show

Question

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

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

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

我了解 Angular ，但是有人对让 ng-show 在 Controller 中更改时注意到 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;
});