Question

Angular Experts -

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

在index.html / main页面

<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范围。我明白这是因为没有经过angular的$ scope / $ digest。所以，我尝试调用$ scope。$ apply（）这显然不起作用，因为我放置它的位置已被评估为$ digest的一部分（希望我措辞正确）。

我已经制作了jsfiddle来说明我的情况。

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

请帮忙。

Answer 1

首先，从不在Angular中使用jQuery。当你了解Angular足以能够挑战＆＃34;永远不会＆＃34;我的断言的一部分，然后可以看看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

angularjs $ scope.apply（）动态输入

1 个答案: