Question

我的index.html模板中有一个搜索栏，我需要隐藏在某些页面上。我使用的是ui-router和$state。

我能做到这一点的唯一方法就是将$rootscope注入我的所有控制器中ng-hide: true或false，以便在需要时打开或关闭它们。（我只需要隐藏在1或2页上）

我不认为这是正确的方法，因为我的所有控制器现在都依赖并注入$rootscope。

还有其他办法吗？

Answer 1

让我们从全局控制器示例GlobalCtrl开始，该示例已添加到body或html标记，例如ng-controller="GlobalCtrl。

这样做可以让我们在整个单页Angular应用中保持GlobalCtrl的范围（正如您使用的ui-router），我们可以避免使用$rootScope（实际上模仿$rootScope）的用法。

现在，在GlobalCtrl内定义如下内容：

// Using an object to avoid the scope inheritance problem of Angular
// https://github.com/angular/angular.js/wiki/Understanding-Scopes
$scope.globalData = {showSearchBar: true};

// This callback will be called everytime you change a page using ui-router state
$scope.$on('$stateChangeStart', function(event, toState, toParams) {
    $scope.globalData.showSearchBar = true;

    // Just check for your page where you do not want to display the search bar
    // I'm using just an example like I don't want to display in contac-us page named state
    if (toState.name == 'contact-us' || toParams.foo == "bar") {
        $scope.globalData.showSearchBar = false;
    }
});

现在，在index.html中，只需使用ng-show：

<div ng-show="globalData.showSearchBar">
    <input type="text" ng-model="query" />
</div>

Answer 2

例如

<div ng-controller="SearchCtrl">
<div ng-if="show">
...
</div>
</div>

app.controller('SearchCtrl', ['$state', '$scope', function($state, $scope) {
    $scope.show = !$state.is('someState1') && !$state.is('someState2');
}

这不是那么好的风格，但只会有效。

Answer 3

我不喜欢继续使用控制器，我认为最好以不依赖于另一个控制器的方式分离应用程序的每个部分。

我将使用服务来共享数据：

'use strict';

angular.module('yourModule')
    /**
        A service used to share resources between controllers
    */
    .factory('Shared', [function () {
        var resources = {};

        resources.targetList = [];
        resources.isVisibleDivA = true;
        resources.isVisibleDivB = false;

        return resources;
    }]);

通过这种方式，注入服务，您将始终能够与正确格式化布局所需的状态变量进行交互。

如果要重用控制器，只需添加模拟服务，就不需要依赖控制器。

Answer 4

在ui-router中，您可以使用abstract states创建层次结构。通过这种方式，您可以拥有具有搜索栏视图的父路线，而不具有搜索栏视图的父路线。你所有的实际路线都可以从这两个路线继承而且你已经完成了。

像这样的东西

$stateProvider
.state('rootLayout', {
    abstract: true,
    // Note: abstract still needs a ui-view for its children to populate.
    // You can simply add it inline here.
    template: '<div><div ui-view="topbar"></div><div ui-view></div></div>'
})
.state('searchbarLayout', {
    abstract: true,
    views: {
        '@rootLayout': { 
             // Note: abstract still needs a ui-view for its children to populate.
             // You can simply add it inline here.
             template: '<div ui-view></div>'
        },
        'topbar@rootLayout': { 
             template: '<input type="search" />'
        },
    }    
});

Answer 5

您可以使用表达式中的$root从模板中访问$ rootScope。像：

<div ng-show="$root.appSettings.flag">
    <span>Hello!</span>
</div>

Answer 6

我在应用程序的运行功能中注册了该对象

.run([ '$rootScope', function ($rootScope) {
  $rootScope.searchBar = { value: true };
}])

然后使用范围更改值。这会停止将$ rootscope添加到每个控制器

中

$scope.searchBar.value = false;

在index.html页面中设置值

<div ng-show="searchBar.value" ng-include src="'app/shared/search.html'"></div>

使用$ rootscope显示和隐藏

6 个答案: