Question

我试图弄清楚当状态发生变化时如何更新我的ng-show变量。在我的默认index.html文件中：

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

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

我知道有角度，但有人建议让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

<Directory "/Library/WebServer/Documents">

不工作。（第二个语句不会更新父范围中的值）

AllowOverride All

会工作吗？（第二个语句将更新父范围中的值）

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

从不同的控制器

2 个答案: