javascript - modalService 无法与 Controller 和 View 对话

Question

The code at this plnkr有一个模态，当用户点击 “点击参加测验” 按钮时弹出，该按钮调用 Controller 方法，而 Controller 方法又调用模态服务。 要使 plnkr 正常工作，请单击代码中的任意位置并按空格键以不影响语法的方式添加空格。这将触发 plnkr 重新初始化应用程序，并在您单击按钮后弹出模式。

问题是当 timeLeft 变量倒计时时，模式中打印的文本不会动态更新。而且，用户的按钮点击不会更新 quizAnswer 变量。简而言之，模式无法与调用 Controller 和 View 进行交互。

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

另外，我一直在仔细阅读the documentation at this link .我认为答案可能与:

1.) $uibModal的options参数传入open(options)包含参数scope定义用于模态内容的父范围，以及属性 bindToController，当设置为 true 时，将 scope 属性绑定(bind)到由 controllerAs 定义的特定 Controller 。

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

我怀疑解决方案在于这些方法和参数，但我正在寻找很好的例子，希望有经验的人能看到这个问题。

注意:这个问题的解决方案出现在已接受答案下方的评论中，尤其是指向另一个帖子的链接，该帖子包含 2 行代码，用于将模态按钮点击的结果发送回父 Controller 。

Answer 1

你有很多问题。

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

其次，$scope.$apply 和 $scope.$digst(); 在 navigation.js - 第 29/30 行是不必要的，因为你已经在一个消化周期。它们应该被删除，否则它们会触发错误。

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

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

您需要在导航 Controller 中注入(inject)(并从中广播)$rootScope，因为 modalService 已在作用域链中非常高的位置注册。

在每次滴答时，广播剩余时间 navigation.js:

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

在您的 modalService.js 中，注册以接收 Controller 分配中的事件:

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

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

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

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

查看我的工作 fork plunker here