Question

我在AngularJS中创建了一个服务和视图，它提供了基于控件的动态按钮。我无法通过控制器中的变量实现隐藏/显示按钮。

HeaderRemote.js

app.factory('HeaderRemote',['$rootScope', function($rootScope) {

    var factory = {            
        toolbar: []
    };

    // on history changes, remove toolbar
    $rootScope.$on("$routeChangeStart", function (event, next, current) {
        factory.toolbar.splice(0,factory.toolbar.length);
    });

    return factory;
}]);

HeaderController.js

return app.controller('HeaderCtrl',
    ['$rootScope', '$scope', 'HeaderRemote', function ($rootScope, $scope, HeaderRemote{

        $scope.toolbar = HeaderRemote.toolbar;
}]);

HeaderView.html

<ul class="nav navbar-nav">
    <li ng-repeat="tool in toolbar">
        <button type="button" 
                class="btn btn-link" 
                ng-click="tool.fn()" 
                ng-show="tool.show === undefined || tool.show">
                    <span ng-show="tool.icon" class="{{tool.icon}}"></span>
                    <span>{{tool.name}}</span>
        </button>
    </li>
</ul>

然后我的另一个控制器操纵头部远程，如：

HeaderRemote.toolbar.push({
   name: "Save",
   fn: $scope.save,
   icon: "icon-check-alt",
   show: $scope.showSave
});

$scope.showSave最初设置为false，但稍后我将其设置为true，并且标题中的内容永远不会更改。

Answer 1

最初将新项目推送到HeaderRemote.toolbar：

HeaderRemote.toolbar.push({
   name: "Save",
   fn: $scope.save,
   icon: "icon-check-alt",
   show: $scope.showSave
});

您正在分配$ scope.showSave的当前值。但是，您没有将新数组元素绑定到$ scope，因此如果$ scope更改，则不会更改HeaderRemote内的数组。如果需要，可以在控制器内部设置一个调用HeaderRemote.toolbar.push（）的观察器，如下所示：

$scope.$watch("showSave", function (newValue, oldValue) {
    if (newValue !== oldValue) {
        /** Note that you'll need some way of retaining the index of the Header item you want to change. **/
        HeaderRemote.toolbar[0].show = newValue;
    }
})

按钮显示/隐藏服务

1 个答案: