angularjs $scope.apply() 动态输入

Question

角度专家 -

我有一个 AngularJS SPA，并且 index.html 页面上有一个功能可以打开一个 angular-ui 模态对话框，并且根据用户从模态对话框中的选择，我需要填充 3 个动态生成的输入index.html 中的字段。我确实知道动态生成的输入字段的 id 模式，并且可以使用 jqLit​​e 来获取对它们的引用来设置值。

在 index.html/主页面中

<input type="text" class="form-control" id="txt1" placeholder="txt1" ng-model="txt1">
<input type="text" class="form-control" id="txt2" placeholder="txt1" ng-model="txt2">
<input type="text" class="form-control" id="txt3" placeholder="txt1" ng-model="txt3">

从模态实例中选择数据后：

$scope.ok = function() {
        angular.element(document.querySelector('#txt1')).val('Value from modal for txt 1');
        angular.element(document.querySelector('#txt2')).val('Value from modal for txt 2');
        angular.element(document.querySelector('#txt3')).val('Value from modal for txt 3');

      // $scope.$apply() doesn't work as it is already in progress
      // how to update angular context with these changes?
    
        $modalInstance.close();
};

但是，应用的这些值都没有绑定到 angularjs 范围。 我明白这是因为没有通过角度的 $scope / $digest。所以，我尝试调用 $scope.$apply() 这显然不起作用，因为我放置它的地方已经被评估为 $digest 的一部分（希望我措辞正确）。

我已经发了jsfiddle 来说明我现在的情况。

我已经阅读了有关 $scope 和 $digest 的所有内容，并且具有理论知识。我无法弄清楚如何应用这些知识来解决这种情况并使用我动态分配的输入值执行 $scope.$apply()？

请帮忙。

Answer 1

一方面，从不在 Angular 中使用 jQuery。当你对 Angular 有足够的了解，能够挑战我断言的“从不”部分时，就可以了解 jQuery 如何与 Angular 一起玩了。

jQuery，或者任何从控制器获取/设置 DOM 元素的尝试都会让你陷入困境。这个SO answer 是一个很好的起点。

特别针对您的问题，$modal 为您提供了modalInstance.result，它可以从视图控制器获得通过$modalInstance.close(result) 从模态控制器传递给它的任何结果 这就是你使用它的方式：

在模态控制器中：

$modalInstance.close({txt1: "value from txt1", txt2: "something else"});

这就是你在视图控制器中获得它的方式：

var modalInstance = $modal.open(...);
modalInstance.result.then(function(result){
  $scope.txt1 = result.txt1;
  $scope.txt2 = result.txt2;
});

plunker