angularjs - нг-повтор внутри нг-включенного частичного не работает

На моей родительской странице я включаю частичное использование ng-include. В этой части я использую ng-repeat для вывода элементов формы.

Как видите, массив для ng-repeat содержит 4 элемента (elements.length), но по какой-то причине angularjs полностью пропускает ng-repeat. Как будто директива отключена.

Я использую эту же настройку (ng-include, частичную с ng-repeat) в других областях моего приложения без каких-либо проблем. Для жизни я не могу понять, почему этот просто пропускает нг-повтор.

родительская страница:

<div ng-include src="'/views/form/partial.html'"></div>

partial.html

    <form method="post" accept-charset="UTF-8" action="{{form.url}}{{form.hash}}">
    <input type="hidden" name="h" value="{{form.hash}}" />
    <p>Elements: {{elements.length}}</p>
<pre>{{elements|json}}</pre>
    <div ng-repeat="element in elements">
        <label for="{{element.variable}}">{{element.display}}</label>
        <input type="input" id="{{element.variable}}" name="{{element.variable}}" value="" />
    </div>
    <input type="submit" value="{{form.submit_text}}" />
</form>

Что отображается в частичном:

    <form method="post" accept-charset="UTF-8" action="http://weebsite.com/h/eb58f4450026eae5815cbf4742cb27cd">
    <input type="hidden" name="h" value="eb58f4450026eae5815cbf4742cb27cd" />
    <p>Elements: 4</p>
<pre>[
  {
    "variable": "email",
    "mandatory": true,
    "display": "Email",
    "hidden": false
  },
  {
    "variable": "first_name",
    "mandatory": false,
    "display": "First Name",
    "hidden": false
  },
  {
    "variable": "last_name",
    "mandatory": false,
    "display": "Last Name",
    "hidden": false
  },
  {
    "variable": "new_field_3335",
    "mandatory": false,
    "display": "New Field",
    "hidden": false
  }
]</pre>
    <div ng-repeat="element in elements">
        <label for=""></label>
        <input type="input" id="" name="" value="" />
    </div>
    <input type="submit" value="click me now" />
    </form>
Источник

2 ответа

Вот полный фрагмент кода: только проблема была в том, что вы должны передать все переменные и элементы json из контроллера. Просто убедитесь, что угловая JS загружается правильно.

var myApp = angular.module("myModule",[])
                   .controller("myController", function ($scope){
    var elements = [
  {
    "variable": "email",
    "mandatory": true,
    "display": "Email",
    "hidden": false
  },
  {
    "variable": "first_name",
    "mandatory": false,
    "display": "First Name",
    "hidden": false
  },
  {
    "variable": "last_name",
    "mandatory": false,
    "display": "Last Name",
    "hidden": false
  },
  {
    "variable": "new_field_3335",
    "mandatory": false,
    "display": "New Field",
    "hidden": false
  }
]
    $scope.elements = elements;
 $scope.form = {
 "hash":"eb58f4450026eae5815cbf4742cb27cd", "submit_text":"submit", "url":"http://weebsite.com/h/"
 };
});
<html ng-app="myModule">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="angular.min.js" type="text/javascript"></script>
     <script src="app1.js" type="text/javascript"></script>
    </head>
    <body>
        <div ng-controller="myController">
               <form method="post" accept-charset="UTF-8" action="http://weebsite.com/h/">
    <input type="hidden" name="h" value="{{form.hash}}" />
    

    <div ng-repeat="element in elements">
        <label for="{{element.variable}}">{{element.display}}</label>
        <input type="input" id="{{element.variable}}" name="{{element.variable}}" value="" />
    </div>
    <input type="submit" value="{{form.submit_text}}" />
</form>
        </div>
    </body>
</html>

Источник

Оказывается, нг-повтор не удается внутри <textarea>в то время как другие переменные подстановки работают как положено.

Part.html находится внутри <textarea>, Как только я удалил его из <textarea>все работало.

Источник
Другие вопросы по тегам