Question

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

我有一个父模板，它有一些按钮，例如'edit'和'delete'。然后，我在这个父级内部有一个子视图，其中包含一个数据列表以及一些带有数据选项卡的其他子视图。

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

我目前正在使用$state.params.action传递用户正在进行的操作（例如新建，编辑或删除）以及$state.params.id来传递他们正在编辑的记录的ID。

如何使用ng-show / ng-hide隐藏这些内容？请记住，我要隐藏的按钮位于ControllerA中，但我希望能够从ControllerB隐藏/显示它们（这是ControllerA的子视图）。

Answer 1

创建角度控制器时，您应该尝试通过简单地将其范围绑定到实际处理状态的服务来使它们保持尽可能薄。

因此，在您的示例中，您可以使用一项服务来管理当前所选数据的状态（不完全确定您的设置）。

例如：

.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;
});

这里的想法是保持您的意图模块化，并且只需让控制器使用这些与之交互的模块化服务。

Answer 2

如果您想在父控制器中完成某些操作，可以从子控制器发出事件，如下所示：

$scope.$emit("someEvent", {exampleJsonData: exampleJsonValue});

并在父控制器中捕获任何发出/广播的事件，如下所示：

$scope.$on("someEvent", function(event, args){
//do stuff
});

如何隐藏/显示父视图的元素？

2 个答案: