Используйте угловую директиву для генерации html из массива

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

Проблема заключается в том, что она просто не работает. Если я введу 1 в поле numChildren, тогда он отображает 1 маркерную точку для элемента списка, но он не отображает ни одного из HTML. Если я введу 2 в поле numChildren, то он не отображает элементы списка.

Может ли кто-нибудь объяснить, что я делаю неправильно?

Большое спасибо ...

Answer 1

Ваш главный вопрос заключается в том, что директива childDOB никогда не оказаны. Даже несмотря на то, что ваш контроллер работает, потому что версия угловой версии 1.2.x обнаруживает глобальный контроллер. Он будет искать любые общедоступные конструкторы в глобальной области действия, чтобы соответствовать имени контроллера в директиве ng-controller. Это не так для директивы. Таким образом, отсутствие ng-app="appname" не дает никакой директивы. Поэтому добавьте имя приложения ng-app="myApp" и увидите, что он работает. Также хорошей практикой является не загрязнять глобальный охват и не регистрировать контроллер должным образом с помощью конструктора controller(). (Глобальный поиск в любом случае устарел с версии 1.3.x и может быть отключен только на глобальном уровне.)

Вам также необходимо добавить track by в ng-repeat из-за повторителя, который может возникнуть из-за увеличения длина массива на основе значения текстового поля. Это может привести к тому, что несколько значений массива будут неопределенными, что приведет к дублированию. 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> 

Script

(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/>' 
     } 
    }); 
})();