按钮显示/隐藏服务

  • Z时代
  • 2024-01-10
  • 分类：问答

我已经在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并且它在标头中永不改变。

回答：

当您最初推新项目进入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; 
    } 
})

以上是 按钮显示/隐藏服务 的全部内容， 来源链接： utcz.com/qa/266901.html

回到顶部