Question

我想创建一个带有列表项的侧栏，可以根据设置页面动态更改。

我的应用程序通过factory（）请求settings.json，然后在控制器中调用它。控制器将由settings.html（ngView）和sidebar.html（ngInclude）使用。

json将返回布尔值，该值也可以在包含复选框的设置页面上更改，如果选中则返回true，如果未选中则返回false。我在侧边栏上使用ngShow来显示/隐藏列表项。

当我勾选复选框时，如何让侧边栏反映更改？

settings.factory.js

var settingsFactory = angular.module('settingsFactory', []);

settingsFactory.factory('SettingsFilterFactory', ['$http', function ($http) {

    var settingsFactory = {};

    settingsFactory.getSettings = function () {
        return $http.get('app/data/settings.json');
    };

    return settingsFactory;
}]);

控制器

var settingsControllers = angular.module('settingsControllers', ['settingsFactory']);

settingsControllers.controller('SettingsFilterController', ['$scope', '$http', 'SettingsFilterFactory', function ($scope, $http, SettingsFilterFactory) {

    $scope.settings;
    $scope.status;

    getSettings();

    function getSettings() {
        SettingsFilterFactory.getSettings()
            .then(function (response) {
                $scope.settings = response.data;
            }, function (error) {
                $scope.status = 'Unable to load: ' + error.message;
            });
    }
}]);

app.js

var app = angular.module('app', ['ngRoute', 'settingsControllers']); 
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
    when('/settings', {
        title: 'Settings',
        templateUrl: 'app/components/settings/settings.html',
        controller: 'SettingsFilterController'
    }).
    otherwise({
        redirectTo: '/home'
    });
}]);

我的 index.html 是这样的：

...
<body>
    <section class="sidebar">
        <div ng-include="'app/components/sidebar/sidebar.html'"></div>
    </section>

    <section class="content">
        <div ng-view></div>
    </section>
</body>
...

sidebar.html

<ul class="sidebar-menu" ng-controller="SettingsFilterController">
    <li ng-show"settings.hiddenMenu"><a href="#!/secret">This is secret link</a></li>
</ul>

settings.html

...
<div class="checkbox">
    <input type="checkbox" ng-model="settings.hiddenMenu" ng-true-value=true ng-false-value=false> Check this to show hidden menu
</div>
...

Answer 1

尝试这样的事情（未经测试）：

<强> settings.factory.js

var settingsFactory = angular.module('settingsFactory', []);

settingsFactory.factory('SettingsFilterFactory', ['$http', function ($http) {

    var settingsFactory = {};

    settingsFactory.getSettings = function () {
        return $http.get('app/data/settings.json');
    };

    settingsFactory.hiddenMenu= true;
    settingsFactory.someOtherSetting = {};

    return settingsFactory;
}]);

侧边栏控制器

settingsControllers.controller('SidebarController', ['$scope', '$http', 'SettingsFilterFactory', function ($scope, $http, SettingsFilterFactory) {
  //do this in each controller, so that the factory becomes a property of $scope and can be seen in the HTML
  $scope.settingsFactory = SettingsFilterFactory;
}

<强> sidebar.html

 <ul class="sidebar-menu" ng-controller="SidebarController">
    <li ng-show"settingsFactory.hiddenMenu"><a href="#!/secret">This is secret link</a></li>
</ul>

<强> settings.html

...
<div class="checkbox">
  <input type="checkbox" ng-model="settingsFactory.hiddenMenu" ng-true-value=true ng-false-value=false> Check this to show hidden menu
</div>
...

基本上，您将settingsFactory对象绑定到每个控制器提供的每个$scope。每个控制器都能够更改工厂对象的属性，然后在注入此对象的所有其他控制器中可以看到该属性。

ngInclude和ngView之间的数据绑定

1 个答案: