modalService无法与控制器和视图进行对话

modalService cannot talk with controller and view

本文关键字：视图 对话 控制器 modalService      更新时间：2024-02-07

这个plnkr的代码有一个模式，当用户点击"点击进行测试"按钮时，该按钮会弹出，该按钮调用控制器方法，该方法反过来调用模式服务要使plnkr工作，请单击代码中的任何位置，然后按空格键以不影响语法的方式添加空白。这将触发plnkr重新初始化应用程序，并在您单击按钮后弹出模态

问题是，当timeLeft变量倒计时时，模态中打印的文本不会动态更新。而且，用户单击按钮不会更新quizAnswer变量。简而言之，模态无法与调用控制器和视图进行交互对话。

需要对plnkr进行哪些具体更改，以获得显示动态倒计时的模态文本，并获得更改$scope.quizAnswer变量值的模态按钮

此外，我一直在仔细阅读这个链接上的文档。我认为答案可能与有关

1.）open(options)中传递的$uibModal的options参数包含参数scope，该参数定义了要用于模态内容的父作用域，还包含属性bindToController，当设置为true时，该属性将scope属性绑定到由controllerAs定义的特定控制器。

2.）open(options)方法返回一个模态实例，该实例包括close(result)和dismiss(reason)。

我怀疑解决方案在于这些方法和参数，但我正在寻找好的例子，并希望有一些经验丰富的人来研究这个问题。

注意：解决方案出现在接受答案下方的评论中，尤其是指向另一篇帖子的链接，该帖子包含2行代码，用于将模式按钮点击的结果发送回父控制器

您有许多问题。

首先，navigation.js第16行的takeQuiz应该附加到$scope，而不是this，因为this会根据上下文发生变化。

其次，navigation.js第29/30行的$scope.$apply和$scope.$digst();是不必要的，因为您已经处于摘要周期中。它们应该被删除，否则会引发错误。

最后（这是问题的核心），您误解了在创建模态实例时如何绑定模态选项。它不是双向绑定；它是从一个对象延伸到另一个对象的单个对象。因此，尝试绑定到选项（或创建带有timeRemaining的串联字符串）将不会在绑定后更新。

相反，一种可能性是在模态内部创建一个事件处理程序，并在每个刻度上广播，更新模态。此外，如果将正文文本作为前缀和附加文本传递，则更容易插入时间戳值：

您将需要在navigationController中注入（并从中广播）$rootScope，因为modalService在作用域链中非常高的位置注册。

在每个刻度上，广播剩余导航时间。js:

$rootScope.$broadcast('timeRemainingTick', $scope.timeRemaining);

在您的modalService.js中，注册以接收控制器分配内部的事件：

var timeRemainingUnbind = $scope.$on('timeRemainingTick', function(event, newTick) {
    $scope.modalOptions.timeRemaining = newTick;
});

最后，确保通过在模态的关闭事件中调用timeRemainingUnbind()来解除事件绑定，以防止内存泄漏：

$scope.modalOptions.ok = function (result) {
    timeRemainingUnbind();
    $modalInstance.close(result);
};
$scope.modalOptions.close = function (result) {
    timeRemainingUnbind();
    $modalInstance.dismiss('cancel');
};

在这里查看我的工作分叉plunker

相关文章：