Question

我尝试使用Angular指令创建一个表单，用户可以在其中指定子项数，并且对于每个子项，会出现一个编辑框，允许输入孩子的出生日期。

这是我的HTML：

<div ng-app>
  <div ng-controller="KidCtrl">
    <form>
    How many children:<input ng-model="numChildren" ng-change="onChange()"/><br/>
    <ul>
        <li ng-repeat="child in children">
            <child-dob></child-dob>
        </li>
      </ul>
    </form>
  </div>
</div>

这是JS：

var app=angular.module('myApp', []);

function KidCtrl($scope) {
  $scope.numChildren = 2
  $scope.children = [{dob: "1/1/90"}, {dob: "1/1/95"}];
  $scope.onChange = function () {
    $scope.children.length = $scope.numChildren;
  }
}

app.directive('childDob', function() {
    return {
      restrict: 'E',
      template: 'Child {{$index+1}} - date of birth: <input ng-model="child.dob" required/>'
    };
  });

这里a jsFiddle

问题在于它不起作用。如果我在numChildren字段中输入1，那么它会显示列表元素的1个项目符号点，但它不会显示任何HTML。如果我在numChildren字段中输入2，那么它不会显示任何列表元素。

任何人都可以解释我做错了吗？

非常感谢......

Answer 1

您的主要问题是永远不会呈现指令childDOB。即使你的控制器工作，因为1.2.x版本的angular有全局控制器发现。它将查找全局范围内的任何公共构造函数，以匹配ng-controller指令中的控制器名称。指令不会发生。因此缺少ng-app="appname"指令无法呈现。因此，请添加appname ng-app="myApp"并查看其是否有效。不使用controller()构造函数来污染全局范围并正确注册控制器也是一种很好的做法。（截至1.3.x，全局查找已被弃用，只能在全球范围内关闭。）

由于根据文本框值增加数组长度而可能发生的转发器，因此您还需要在ng-repeat中添加track by。它可能导致多个数组值未定义，从而导致重复。 SO： -

 ng-repeat="child in children track by $index"

<强> Fiddle

<强> HTML

<div ng-app="myApp">
    <div ng-controller="KidCtrl">
        <form>How many children:
            <input ng-model="numChildren" ng-change="onChange()" />
            <br/>
            <ul>
                <li ng-repeat="child in children track by $index">{{$index}}
                    <child-dob></child-dob>
                </li>
            </ul>
        </form>
    </div>
</div>

<强>脚本

(function () {

    var app = angular.module('myApp', []);

    app.controller('KidCtrl', KidCtrl);

    KidCtrl.$inject = ['$scope'];
    function KidCtrl($scope) {
        $scope.numChildren = 2
        $scope.children = [{
            dob: "1/1/1990"
        }, {
            dob: "1/1/1995"
        }];
        $scope.onChange = function () {
            $scope.children.length = $scope.numChildren;
        }
    }

    app.directive('childDob', function () {
        return {
            restrict: 'E',
            template: 'Child {{$index+1}} - date of birth: <input ng-model="child.dob" required/>'
        }
    });
})();

使用Angular指令从数组生成html

1 个答案: