AngularJS: ng-click 功能和改变变量的状态

Question

我正在尝试将 Bootstrap 3 个模态与 AngularJS 结合使用。我有两个按钮：登录和注册，单击它们后我希望弹出一个模式。根据用户选择的按钮，我需要显示适当的内容。为了解决这个问题，我在模态框内使用了 ng-show 和 ng-hide。一切正常，但在这段代码中我的变量 isRegistrationPage 没有改变它的状态。

button.btn.btn-default.navbar-btn.btn-info ng-click="isRegistrationPage=false;open('sm')" Log in

button.btn.btn-default.navbar-btn.btn-warning ng-click="isRegistrationPage=true;open('sm')" Sign up

我几乎使用了来自 https://angular-ui.github.io/bootstrap/#/modal

的原始 JS 部分

还有其他管理目标的好方法吗？

Answer 1

您可以在控制器中有两个函数，每个按钮一个，然后从那里调用 open('sm')。

像这样：

$scope.onLoginClicked = function(){
    $scope.isRegistrationPage = false;
    open('sm');
}
$scope.onSignupClicked = function(){
    $scope.isRegistrationPage = true;
    open('sm');
}

然后只需在 ng-click 上使用它们

Answer 2

我认为您尝试以错误的方式使用模态服务，尤其是您想要通过 isRegistrationPage 变量的方式。

看看下面的代码片段：

在这里您可以看到我的控制器的一部分，其中 editBlogEntry 方法负责打开模式 window。请注意我可以传递变量的解析部分。

function editBlogEntry(blogEntryId)
        {
            var modalInstance = $modal.open({
                templateUrl: '/ui/app/dilib/partials/blog/blog-entries/blog-entry-form.html',
                controller: 'editBlogEntryController as vm',
                size: 'lg',
                resolve: {
                    selectedBlogEntryId: function ()
                    {
                        return blogEntryId;
                    }
                }
            });

            modalInstance.result
                .then(function (result)
                {
                    logSuccess('Blog entry is modified!');
                    $route.reload();
                });

        }

这是控制器的一部分，将在打开模式 window 时实例化。注意 selectedBlogEntryId 这是传递的变量。

var controllerId = 'editBlogEntryController';

    angular
        .module('dilibApp')
        .controller(controllerId, ['$scope', '$modalInstance', 'selectedBlogEntryId', 'common', 'datacontext', 'dataservice.blogentry.helper', editBlogEntryController]);

    function editBlogEntryController($scope, $modalInstance, selectedBlogEntryId, common, datacontext, dataServiceBlogEntryHelper)
    { /*... javascript magic ...*/}

HTML部分，可以看到edit方法绑定了一个button元素。

<button class="btn" ng-model="blogEntry.id" ng-click="vm.editBlogEntry(blogEntry.id)">edit</button>

AngularJS: ng-click 功能和改变变量的状态

AngularJS: ng-click with function and changing variable's state

javascript

angularjs

twitter-bootstrap-3