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

Question

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

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

需要对plnkr进行哪些具体的修改才能获取模态文本显示动态倒计时，以及获取模态按钮来改变$scope.quizAnswer变量的值？

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

1.) 在open(options) 中传递的$uibModal 的options 参数包含参数scope，该参数定义了用于模态内容的父范围，以及属性bindToController，当设置为true，将scope 属性绑定到controllerAs 定义的特定控制器。

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

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

注意：此问题的解决方案出现在已接受答案下方的 cmets 中，尤其是指向另一个帖子的链接，其中包含 2 行代码，用于将模式按钮单击的结果发送回父控制器。

Answer 1

你有很多问题。

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

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

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

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

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

在每个刻度上，广播剩余时间 navigation.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 here