Angular-ui 引导模式按钮不会执行功能答案

【问题标题】：Angular-ui bootstrap modal button will not execute functionAngular-ui 引导模式按钮不会执行功能
【发布时间】：2015-08-03 12:22:00
【问题描述】：

我的模态设置是这样的

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

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

【问题讨论】：

该函数是否被命中？你放了debugger 看看吗？
是范围内的函数（尝试在模板中显示 removeSetting 变量）如果在范围内，它是否进入它（在开始时添加日志） - 可以有例如。承诺中的一些问题或在结果函数周围缺少 $apply。很难猜到
你是如何打开你的模态的？您在模态中提供了哪个控制器？上面有函数吗？

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

【解决方案1】：

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

$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>

【讨论】：