angularjs $scope.apply() 动态输入

Question

Angular专家-

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

在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();
};

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

我做了一个jsfiddle来说明我现在的情况

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

请帮忙。

Answer 1

一方面，从不将 jQuery 与 Angular 一起使用。当您对 Angular 的理解足以挑战我断言的 "never" 部分时，就可以研究 jQuery 如何与 Angular 一起玩了。

jQuery，或对控制器中 get/set 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

angularjs $scope.apply() 动态输入

angularjs $scope.apply() dynamic Inputs

angularjs

angularjs-scope