Angular-ui bootstrap模态按钮不会执行函数

时间:2015-08-03 12:22:01

标签: javascript angularjs twitter-bootstrap angular-ui-bootstrap

我的模态设置如此

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">Confirm</h3>
    </div>
    <div class="modal-body">
        <p>Are you sure you want to remove Two Factor Authentication from your profile?</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="removeSetting()">Yes</button>
        <button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
    </div>
</script>

按下取消按钮可以完成它应该做的事情,只需关闭模态。当用户点击是按钮时,我的问题出现了。我的函数removeSetting()永远不会被执行。

$scope.removeSetting = function() {
        TwoFactorAuthenticationService.removetAuthetication().then(function(data) {
            $scope.busy3=false;
            notifyService.alert("error", notifyService.getAlertText('2FactorRemovedToken'));
            $scope.busy=true;
            $timeout(function() {
                $scope.templateUrl = 'twofactorsetup/step1.html';
            }, 3000);
        }, function() {
            notifyService.alert("error", notifyService.getAlertText('2FactorRemoveTokenFailed'));
        });
    };

这是应该调用和执行的函数。我错过了什么?

1 个答案:

答案 0 :(得分:0)

将这样的代码放在模态初始化

$modal.open({
    templateUrl: 'myModalContent.html',
    scope: $scope,
    controller: function($scope, $modalInstance) {
        $scope.removeSetting = function() {
            //place your code here or call function from parent scope
            $scope.$parent.removeSetting();
            $modalInstance.dismiss('cancel');
        };
    }
});

如果不使用父范围,则不需要范围参数。

或者您可以使用来自此类模板的父作用域的调用函数(通过使用$ parent.removeSetting()调用)

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">Confirm</h3>
    </div>
    <div class="modal-body">
        <p>Are you sure you want to remove Two Factor Authentication from your profile?</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="$parent.removeSetting()">Yes</button>
        <button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
    </div>
</script>