javascript - 如何隐藏/显示父 View 的元素？

Question

我在使用 ui-ruoter 的 Angularjs 中使用表单的设计模式时遇到了问题。

我有一个父模板，其中有一些按钮，例如“编辑”和“删除”。 然后，我在这个父 View 中有一个 subview ，其中有一个数据列表以及一些其他带有数据选项卡的 subview 。

在此表中选择一行后，我希望父 View 显示或隐藏“编辑”和“删除”按钮。

我目前正在使用 $state.params.action 来传递用户正在执行的增删改查操作(例如新建、编辑或删除)以及 $state.params。 id 传递他们正在编辑的记录的 id。

如何使用 ng-show/ng-hide 隐藏这些？ 请记住，我想要隐藏的按钮位于 ControllerA 中，但我希望能够从 ControllerB(这是 ControllerA 的 subview )中隐藏/显示它们。

Answer 1

在创建 Angular Controller 时，您应该通过简单地将其范围绑定(bind)到实际负责状态的服务来尝试使它们尽可能薄。

因此，在您的示例中，您可以拥有一项服务来负责管理当前所选数据的状态(不完全确定您的设置)。

例如:

.service('SomeState', function(){

    var state = {
        showEdit: true,
        showDelete: false
    };

    this.getState = function(){
        return state;
    };
});

.controller('ParentCtrl', function($scope, SomeState){
    // bind the service to the parent controller scope
    // so you can use something like ng-show="state.showEdit" on your buttons
    $scope.state = SomeState.getState();
});

.controller('ChildCtrl', function($scope, SomeState){
    // here you can alter the state (this example is directly, but you could also use interface functions on your service)
    var state = SomeState.getState();
    state.showEdit = false;
});

这里的想法是保持你的意图模块化，并且简单地让 Controller 使用它们与之交互的这些模块化服务。