Question

在我的父页面中，我使用ng-include包含部分内容。在该部分中，我使用ng-repeat来回显表单元素。

如您所见，ng-repeat的数组有4个项目（elements.length），但无论出于何种原因，angularjs完全跳过ng-repeat。好像该指令被禁用。

我在我的应用程序的其他区域使用这个完全相同的设置（ng-包括具有ng-repeat的部分）没有任何问题。对于我的生活，我无法弄清楚为什么这个只是跳过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>

在partial中呈现的内容：

    <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>

Answer 1

原来，ng-repeat在<textarea>内失败，而其他变量替换按预期工作。

partial.html位于<textarea>内。一旦我从<textarea>中删除它，一切正常。

Answer 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>

angularjs - ng-repeat内部ng-included局部不起作用

2 个答案: