Question

在我的html页面上，我只有一个简单的Bootstrap模式和按钮来调用它：

        <button class="btn btn-primary" data-toggle="modal" data-target="#addUpdateGroup">Add group</button>

        <div class="modal fade" id="addUpdateGroup" tabindex="-1" role="dialog" aria-labelledby="addUpdateGrouplLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    </div>
                    <form name="addUpdateGroupForm" ng-submit="addUpdateGroupForm.$valid && groupCtrl.addUpdateGroup()" novalidate>                         
                        <div class="modal-body">
                                <input type="hidden" ng-model="groupCtrl.group.id" name="groupid" />
                                <label for="groupname">Group name:</label>
                                <br>
                                <input ng-model="groupCtrl.group.name" type="text" name="groupname" id="groupname" required />
                                <br><br>
                                <label for="groupcolor">Boja grupe:</label>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Add</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </div>
                    </form>                         
                </div>
            </div>
        </div>

这是一个简单的形式。验证由AngularJS完成。

现在......当用户提交表单时，我希望关闭模式，但只有它是有效的输入。

所以我把关闭模态的代码放到了控制器中：

this.addUpdateGroup = function() {
    // Adding a new group
    if (typeof this.group.id === 'undefined') {
        this.id += 1;
        this.group.id = this.id;
        this.groups.push(this.group);
    // Updating an existing group
    } else {
        this.groups[this.group.id].name = this.group.name;
        this.groups[this.group.id].color = this.group.color;
    }
    // Clean the form and remove the modal
    this.group = {};
    $scope.addUpdateGroupForm.$setPristine(true);
    $('.modal').modal('hide');
};

但这并不遵循不从控制器操纵DOM的最佳实践。

问题：有更好的方法吗？当调用控制器中的某个函数时，如何实现需要显示或隐藏的模态？

Answer 1

您没有遵循Angular最佳做法。如果您还没有这样做，请查看此传奇的answer：https://stackoverflow.com/a/15012542/202913具体指向该帖子的第1 - 3位。

除此之外，您应该使用以下两个库中的任何一个。它们都实现了Bootstrap的功能，但是使用了原生的Angular实现，即它不依赖于Bootstrap的Javascript库（但确实使用了Bootstrap的CSS）：

angular-ui/bootstrap
angular-strap

两者都非常出色，因此请使用哪种库让您的编码风格更舒适。

如何从AngularJS正确打开和关闭Bootstrap模式

1 个答案: