Question

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

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

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

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

有关

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

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

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

注意：此解决方案出现在接受答案下方的评论中，特别是指向另一个帖子的链接，其中包含2行代码，用于发出模态按钮，将结果返回到父控制器。

Answer 1

你有很多问题。

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

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

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

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

您需要在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');
};

查看我工作的分叉弹药here

modalService无法与控制器和视图通信

1 个答案: