Question

我正在创建表单，其中很少有字段是动态的，动态添加ng-model。例如：

form.append("<input type='hidden' name='paymillToken' value='" + token + "' data-ng-model = 'formdata.token'/>");

当我尝试使用$scope.formdata.token

进行访问时，此字段显示为undefined

以下是我通过ajax添加字段的另一种情况。

    angular.forEach(data.data, function(obj, key) {
        list+='<div class="items text-center"><img src="assets/uploads/discs/'+obj.image+'" class="img-circle"><br><input type="radio" id="chkDisc'+obj.id+'" name="disc_id" value="'+obj.id+'" required data-ng-model="formdata.disc_id" /></div>';
    });
    $scope.discslist = $sce.trustAsHtml(list);

此模型disk_id也无法访问。

Answer 1

这是一个常见问题。通过更新值而不是模型，角度不知道字段中的值是否已更新。正如第一位评论者所说，使用ng-model时，以这种方式更新是完全没有必要的。

Answer 2

好的，要扩展我的评论以及更多关于此处其他人对您说的内容，您所遇到的主要问题是您的方法所固有的。你试图操纵DOM的方式非常不受AngularJS的影响。

在AngularJS中，当您想要更改显示给用户的内容（视图）时，您需要更改模型（控制器范围）。这意味着，您必须设置视图才能响应这些更改。我们使用Angular中的指令和表达式来做到这一点。

您可能已经在使用指令来响应模型中的更改，无论您是否意识到这一点。 ngRepeat，ngModel，ngShow，ngIf，ngInclude是您可能熟悉的少数几个，甚至表单和表单元素（如输入）实际上是Angular中的指令。当您使用这些时，模型中的更改（例如将数据加载到控制器范围中）向Angular发出信号，它应该检查该更改是否会影响视图中的任何指令，如果是，请通过更新视图来响应它

为了做到这一点，Angular需要知道模型的哪些部分连接到视图的哪些部分。当编译添加到页面的html元素时，它会建立这些连接。加载Angular应用程序时会自动执行此编译过程。在那之后，由我们来告诉Angular何时编译添加到页面的html。

我们经常在没有意识到的情况下这样做。例如，当您使用ngView指令时，它将为其加载的每个路由编译模板，以便模板中的所有指令都与其关联的模型正确链接。

我知道这是一个很长的解释，但这里有两个非常重要的要点，对于学习AngularJS至关重要：

要更改视图，请更改模型，让页面上的指令（和表达式）响应这些更改。
当您向页面添加html元素时，如果您希望AngularJS能够在视图中使用它们，则必须先编译它们。编译过程应该通过指令（内置的或自定义的）完成。

那么，所有这些如何适用于您的问题？

首先，我猜测你是通过控制器操纵DOM来破坏这两个规则的。即使可能在控制器中使用$ compile，using a controller to change the DOM is bad practice and simply wrong to do（阅读该文档链接中的部分，具体说明：不要使用控制器：操作DOM ... 的）。在您学习AngularJS时要记住的一个好规则是，在Angular中使用JQuery或JQLite的唯一时间是在创建自定义指令时。

好的，那么你如何解决你的问题呢？使用指令。看起来您已经遇到了一个案例，您正在尝试迭代一个名为data的对象并添加一些与data.data属性相对应的输入。这听起来像是 ngRepeat 的作业。

您需要做的第一件事是将数据添加到控制器并确保视图可以访问它。最简单的方法是将$ scope注入控制器并在范围变量上设置数据。在最简单的形式中，可能看起来像这样：

angular.module('MyApp', [])
  .controller('MyController', ['$scope', function($scope){
    $http.get('/some/url/that/returns/the/data').
     success(function(data) {
      $scope.data = data;
    });
}]);

既然我们可以从视图中访问某个地方的数据，我们可以在html中使用ngRepeat指令，如下所示：

<div ng-controller="MyController">
  <div class="items text-center" ng-repeat="disc in data.data">
    <img ng-src="assets/uploads/discs/{{disc.image}}" class="img-circle"><br>
    <input type="radio" id="{{'chkDisc' + disc.id}}" name="{{disc.disc_id}}" value="{{disc.disc.id}}" required data-ng-model="formdata[disc.disc_id]" />
  </div>
</div>

Angularjs动态添加ng-model不能通过$ scope访问，显示undefined

2 个答案: