AngularJS中函数在模态框关闭前提前返回问题求助

问题根源 #

你使用的tags-input组件的on-tag-removing事件仅支持同步返回布尔值，以此决定是否允许移除标签。你当前返回Promise的方式行不通——因为Promise是异步对象，事件会直接将其视为true，跳过等待直接执行标签移除，完全不会等到用户在模态框里做出选择。

解决方案思路 #

1. 先返回false阻止默认的标签移除行为，不让标签立刻被删除；
2. 打开确认模态框，根据用户的选择手动处理标签：
   • 用户确认删除：从ng-model绑定的数组里手动移除目标标签；
   • 用户取消：什么都不做，保持原标签列表。

修改后的代码实现 #

1. 标签组件HTML

<tags-input ng-model="formVm.form.tags" on-tag-removing="removingTagModal($tag)"></tags-input>

新增$tag参数，用来获取当前要移除的标签对象。

2. 主控制器代码

$scope.removingTagModal = function(tag) {
    // 先返回false，拦截组件默认的移除逻辑
    $modal.open({
        templateUrl: 'removeTagModal.html',
        controller: 'RemoveTagModalController',
        size: 'lg'
    }).result.then(function(confirmDelete) {
        if (confirmDelete) {
            // 用户确认删除，手动从数组中移除目标标签
            const tagIndex = formVm.form.tags.indexOf(tag);
            if (tagIndex !== -1) {
                formVm.form.tags.splice(tagIndex, 1);
            }
        }
        // 用户取消则无操作
    });
    return false;
};

3. 模态框控制器代码（无需修改）

.controller('RemoveTagModalController', ['$scope', '$modalInstance', function($scope, $modalInstance) {
    $scope.ok = function() {
        $modalInstance.close(true);
    };

    $scope.cancel = function() {
        $modalInstance.close(false);
    };
}])

关键说明 #

• 必须先返回false拦截默认行为，否则组件会直接执行移除，模态框的选择结果将无效；
• 手动操作ng-model绑定的数组时，要确保能正确访问到formVm.form.tags（如果formVm未挂载在$scope上，需调整作用域访问方式）。

内容的提问来源于stack exchange，提问作者eia92