Динамический шаблон AngularJS с индексированными массивами переменных области видимости

Я использую AngularJS и пытаюсь создать форму, в которой я могу динамически добавлять новые входные данные, подобные этой скрипке: http://jsfiddle.net/V4BqE/ (основной HTML ниже, рабочий код в скрипке).

<div ng-app="myApp" ng-controller="MyCtrl">
  <div add-input>
    <button>add input</button>
  </div>
</div>

Я хотел бы иметь возможность использовать HTML-шаблон для своей формы, поскольку ввод, который я добавляю, имеет длину ~ 300 строк. Моя проблема в том, что я не могу понять, как индексировать переменную области, содержащую данные, при использовании в шаблоне. Я попытался создать собственную модифицированную версию приведенного выше кода на plnkr http://plnkr.co/edit/4zeaFoDeX0sGTuBMCQP2?p=info . Однако, когда я нажимаю кнопку, элементы формы не появляются.

Онлайн (plnkr) Я получаю 404 не найдено для моего template.html, но я думаю, что это просто ограничение plnkr. На моей машине с Python HttpServer я получаю Error: [$parse:syntax] для $templateRequest и TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. при использовании метода $http.get.

Любые советы по тому, как заставить индексированный массив переменных области работать с внешним html-файлом?

Спасибо, Дж.Р.

Изменить: обновить ссылку plnkr

John Robinson 05.06.2015 источник

Ответы (1)

arrow_upward
0
arrow_downward

Вы можете сделать это без директивы и внешнего шаблона

то, что вы пытаетесь сделать, не требует директивы (на самом деле это очень просто с основными инструментами angularjs)

http://plnkr.co/edit/LVzGN8D2WSL2nR1W7vJB?p=preview

html

<body>

  <div class="container" ng-app="myApp" ng-controller="MyCtrl">

    <button class="btn btn-primary" type="button" ng-click="addPhoneInput()">add input</button>

    <form>
      <div ng-repeat="item in telephoneNumbers">
        <hr>
        <input type="text" ng-model="item.phone">
      </div>
    </form>
    
    
    <hr>
    
    <div class="well">
      <h4>Phone Numbers,</h4>
      <p ng-repeat="item in telephoneNumbers">{{item.phone}}</p>
    </div>
  </div>
</body>

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

app.controller('MyCtrl', ['$scope', function($scope) {
  // Define $scope.telephone as an array
  $scope.telephoneNumbers = [];

  $scope.addPhoneInput = function() {
    $scope.telephoneNumbers.push({});
  };

  // This is just so you can see the array values changing and working! Check your console as you're typing in the inputs :)
  $scope.$watch('telephoneNumbers', function(value) {
    console.log(value);
  }, true);
}]);

Если вы настаиваете на использовании директивы,

http://plnkr.co/edit/BGLqqTez2k9lUO0HZ5g1?p=preview

номер телефона.template.html

<div>
  <hr>
  <input type="text" ng-model="ngModel" >
</div>

html

<body>

  <div class="container" ng-app="myApp" ng-controller="MyCtrl">

    <button class="btn btn-primary" type="button" ng-click="addPhoneInput()">add input</button>

    <form>
      <phone-number ng-repeat="item in telephoneNumbers" ng-model="item.phone"></phone-number>
    </form>
    
    
    <hr>
    
    <div class="well">
      <h4>Phone Numbers,</h4>
      <p ng-repeat="item in telephoneNumbers">{{item.phone}}</p>
    </div>
  </div>
</body>

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

app.controller('MyCtrl', ['$scope', function($scope) {
  // Define $scope.telephone as an array
  $scope.telephoneNumbers = [];

  $scope.addPhoneInput = function() {
    $scope.telephoneNumbers.push({});
  };

  // This is just so you can see the array values changing and working! Check your console as you're typing in the inputs :)
  $scope.$watch('telephoneNumbers', function(value) {
    console.log(value);
  }, true);
}]);

app.directive('phoneNumber', function(){
  return {
    replace:true,
     scope: {
      ngModel: '=',
    },
    templateUrl: "phone-number.template.html"
  }
});

Jossef Harush 05.06.2015

comment

Спасибо за ответы! Я попробую это, когда вернусь к своему компьютеру для программирования этим вечером. - John Robinson; 05.06.2015