刷新 Angular-ui bootstrap $scope

Question

所以我要说：

$scope.errorMessage = "error1";
$scope.addCardModal = $modal.open({ 
    animation: true, 
    templateUrl: 'pages/templates/modals/modal.html',
    size: "lg",
    scope: $scope
});

$scope.checkError = function() {
    $scope.errorMessage = "another error";
}

在我的 modal.html 模板中，我有：

<div ng-click="checkError()">Check Error</div>
<div ng-show="errorMessage">{{ errorMessage }}</div>
<div ng-click="errorMessage = false">Close</div>

当我加载我的模态时，错误消息显示正常。
当我单击关闭时，错误消息会按预期隐藏。
但是，当我单击 检查错误 时，$scope 会发生变化，但不会转换回模态。

有谁知道为什么会发生这种情况以及如何让 $scope 回到模态？因为如果我关闭模式，然后重新打开它，正确的错误消息会再次显示。

Answer 1

您是否尝试过以下方法：

$scope.checkError = function() {
  $scope.errorMessage = "another error";
  $scope.$apply();
}

可能 $digest 没有被触发。

编辑：问题不在于 $digest，而在于被修改的不同范围。创建模态时，Angular 为其分配了一个子 $scope，因此单击此按钮时：

<div ng-click="errorMessage = false">Close</div>

在模态范围内创建了一个新的 'errorMessage' 变量。因此，即使父作用域中的 errorMessage 变量有更新，模态框也会优先考虑其作用域中的 errorMessage。

Answer 2

试试这个：

$scope.errorMessage = "error1";
$scope.addCardModal = $modal.open({ 
    animation: true, 
    templateUrl: 'pages/templates/modals/modal.html',
    size: "lg",
    scope: $scope
});

$scope.checkError = function() {
    $scope.errorMessage = "another error";
}

$scope.toggleError = function(){
    $scope.errorMessage = "";
}

HTML:

<div ng-click="checkError()">Check Error</div>
<div ng-show="errorMessage">{{ errorMessage }}</div>
<div ng-click="toggleError()">Close</div>

我添加了一个 toggleError() 函数，以便您清空 errorMessage 字符串。

刷新 Angular-ui bootstrap $scope

Refresh Angular-ui bootstrap $scope

javascript

angularjs

angular-ui-bootstrap