Question

我正在尝试使用AngularJS的Bootstrap 3模态。我有两个按钮：登录和注册，点击后我想要弹出一个模态。根据用户选择的按钮，我需要显示适当的内容。为了管理这个，我在模态中使用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

您可以在控制器中使用两个功能，每个按钮一个，然后从那里打开（＆＃39; sm＆＃39;）。

这样的事情：

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

然后只需在ng-click

上使用它们

Answer 2

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

看一下下面的代码片段：

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

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

        }

这是控制器的一部分，它将在打开模态窗口时实例化。请注意 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部分，您可以看到编辑方法绑定到按钮元素。

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

AngularJS：用函数点击ng并更改变量的状态

2 个答案: