Angularjs动态添加NG-模式是不是$范围访问，显示不确定 [英] Angularjs dynamically added ng-model is not accessible by $scope, shows undefined

问题描述

我创建的形式，其中几个字段是动态的，NG-模型动态添加。
例：

I am creating form, where few fields are dynamic, ng-model is added dynamically. Ex.:

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

本场显示不确定的，而我尝试使用访问 $ scope.formdata.token

This fields shows undefined while I try to access using $scope.formdata.token

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

Following is another scenario where I am adding fields via 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是无法访问了。

This model disk_id is not accessible too.

推荐答案

好吧，扩大对我的评论，并略偏上其他人都在这里对你说，你遇到的主要问题是在你的方法固有的。你想操作DOM的方式是非常不AngularJS。

Okay, to expand on my comment and a bit more on what everyone else here is saying to you, the main issue you're having is inherent in your approach. The way you're trying to manipulate the DOM is very un-AngularJS.

在AngularJS，当你想改变什么显示给用户（视图），你改变你的模型（控制器范围）。这意味着，你必须设置你的观点，以便能够对这些变化做出反应。我们这样做，随着角度的指令和前pressions。

In AngularJS, when you want to change what is displayed to the user (the view), you make changes to your model (your controller scope). That means, you have to set up your view to be able to respond to those changes. We do that with directives and expressions in Angular.

您很可能已经使用的指令，你是否意识到这不是对模型中的变化。 ngRepeat，ngModel，ngShow，ngIf，ngInclude，你可能熟悉了一把，甚至连表格和表格元素，如输入实际上是角指令。当你使用这些，一改在你的模型（如将数据加载到控制器范围）信号，角，它应该检查的变化是否会影响任何视图中的指令，如果是这样，通过更新视图响应它

You're probably already using directives to respond to changes in your model whether you realize it or not. ngRepeat, ngModel, ngShow, ngIf, ngInclude, are a handful you're probably familiar with, and even forms and form elements like inputs are actually directives in Angular. When you use these, a change in your model (such as loading data into the controller scope) signals to Angular that it should check whether that change affects any of the directives in your view, and if so, respond to it by updating the view.

为了做到这一点，角度需要知道哪个模型的零件被连接到该视图的部分。它使这些连接时，它的编译被添加到页面的HTML元素。这编译过程时会自动加载一个角度应用程序。在此之后，它是由我们来告诉角时，编译被添加到HTML页面。

In order to do this, Angular needs to know which parts of the model are connected to which parts of the view. It makes these connections when it compiles the html elements that are added to the page. This compile process happens automatically when you load an Angular app. After that, it's up to us to tell Angular when to compile html that is added to the page.

更多的往往不是，我们这样做，甚至没有意识到这一点。例如，当您使用ngView指令，它会编译它加载每个路由模板，让一切在你的模板指令的正确与他们关联的模型联系起来。

More often than not, we do this without even realizing it. For example, when you use the ngView directive, it will compile the template for each route that it loads, so that all of the directives in your template are properly linked with their associated model.

我知道这是一个很长的解释，但在这里是必不可少的学习AngularJS两点很重要：

I know this is a long explanation, but there are two very important points here that are essential to learning AngularJS:

1. 要改变视图，你改变你的模型，然后让指令（和前pressions）对这些变化的响应寻呼。


2. 当您添加HTML元素的页面，如果你想AngularJS能在您的视图中使用它们，必须先编译。编译过程应通过指令来完成（无论是建在一个或一个自定义）。

那么，如何将所有这些应用到你的问题？

So, how does all of this apply to your question?

首先，我猜你正在试图操纵通过控制器的DOM打破这两个规则。即使是的可能的使用控制器改变使用$编译控制器， DOM的是不好的做法，只是做错（阅读该链接到文档特别注明的部分：不要用控制器：操作DOM ... 的）。一个很好的规则，当你正在学习AngularJS记住的是，在仅您应该永远被使用JQuery或JQLite内角的时间是当你创建一个自定义的指令。

First, I'm guessing that you're breaking both rules by trying to manipulate the DOM via a controller. Even if it is possible to use $compile in a controller, using a controller to change the DOM is bad practice and simply wrong to do (read the part in that link to the doc that specifically states: Do not use controllers to: Manipulate DOM...). A good rule to remember when you're learning AngularJS is that the only time you should ever be using JQuery or JQLite inside Angular is when you are creating a custom directive.

好了，你怎么解决你的问题？使用指令。它看起来像你得在这里你要遍历一个对象调用数据，并增加一些投入相对应的数据。数据财产的情形。这听起来像一个工作的 ngRepeat

Okay, so how do you solve your question? Use a directive. It looks like you've got a case where you're trying to iterate over an object called data and add some inputs that correspond to the data.data property. This sounds like a job for ngRepeat.

您需要做的第一件事就是将数据添加到您的控制器，并确保它是对视图进行访问。要做到这一点最简单的方法是通过注射$范围到控制器，并设置一个范围变量的数据。在最简单的形式，这可能是这个样子：

The first thing you need to do is add your data to your controller and make sure it is accessible to the view. The easiest way to do this is by injecting $scope into your controller and setting the data on a scope variable. In its simplest form, that might look something like this:

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

现在，我们有数据的地方，我们可以从该视图访问，我们可以用ngRepeat指令在我们的HTML使用它，是这样的：

Now that we have the data somewhere that we can access from the view, we can use it with the ngRepeat directive in our html, something like this:

<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-模式是不是$范围访问，显示不确定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！