Динамически добавленная директива, но содержимое не отображается

0

Я новичок в угловой и пытаюсь создать приложение для голосования. Сейчас у меня 4 поля ввода. 1 вопрос и 3 ответа на использование при создании нового опроса. У меня также есть кнопка, которая добавляет новое поле ввода, если вы хотите добавить еще один ответ. Я читаю, если я хочу динамически добавлять контент в DOM, я должен использовать директиву. Я создал тот, который добавляет новый html-контент, который я хочу, также должен добавить атрибут ng-model, чтобы я мог получить доступ к содержимому, находящемуся в массиве, вместе с другим контентом. Ящики ввода, которые изначально были там, работают нормально, но когда я добавляю новый, он не получит к нему доступа.

Код директивы/функции:

votingApp.directive('addAnswers', [function(){

return {
    template:"<li><input type='text' ng-model='choices[3]'  /></li>",
    restrict: 'E'
}
}]);

Функция, которая добавит новую директиву в список полей ввода.

$scope.addAnswer = function(){

    var node = document.createElement("LI");



    var textnode = document.createElement("add-answers");
    node.appendChild(textnode);

    $scope.pollAnswers.appendChild(node);



};

Наконец, где он должен быть добавлен в HTML.

      <form ng-submit="createPoll()">
        <p>Question</p>
        <input type="text" ng-model="pollQuestion" />

        <p>Answers</p>
      <ul id="answers">
        <li><input type="text" placeholder=" " ng-model="choices[0]" /></li>
        <li><input type="text" placeholder=" "  ng-model="choices[1]" /></li>
        <li><input type="text" placeholder=" "  ng-model="choices[2]" />    </li>
      </ul>
      <input id="create" type="submit" value="Create Poll" />
    </form>

В основном, когда я добавляю новый ввод, я собираюсь сделать ng-model = длиной массива. Однако, когда я делаю это, массив не получает слот больше при добавлении нового элемента.

Теги:
angularjs-directive

2 ответа

1
Лучший ответ

Здесь плунж с лучшим примером: http://plnkr.co/edit/gSWHCxgagMrF4OoEZDh1?p=preview

Вы можете просто ng-повторить на основе ваших выборов.

// controller
votingApp.controller('Controller', ['$scope', function($scope) {
    $scope.choices = [];

    $scope.addAnswer = function() {
        $scope.choices.push('');
    };
}]);

// html
<ul id="answers">
    <li ng-repeat="answer in choices track by $index">
        <input type="text" ng-model="choices[$index]" />
    </li>
</ul>

Вот некоторые вещи из моего плунжера, так что легче увидеть:

votingApp.directive('answers', function() {
    return {
      restrict: 'E',
      scope: {
          choices: '='
      },
      template: '<li ng-repeat="answer in choices track by $index"><input type="text" ng-model="choices[$index]" /></li>'
    };
});

votingApp.controller('VotingController', [ 
  '$scope',
  function($scope) {
    $scope.choices = [];

    // if you want to start with some choices use this
    // $scope.choices = new Array(3);

    $scope.addAnswer = function() {
      $scope.choices.push('');
    };
  }
]);

<body ng-app="votingApp" ng-controller="VotingController">
    <ul>
      <answers choices="choices"></answers>
    </ul>
    <button ng-click="addAnswer()">Add Answer</button>
</body>
Поделиться
  • 0
    Планка показывает, что я имею в виду, используя директиву. Мой ответ, по сути, просто идея.
  • 0
    Эй, вантуз действительно помог. Я думаю, что у меня есть предполагаемая функциональность, которую я искал. Единственная запутанная часть - почему у нас есть выбор = "выбор" в элементе html, а также шаблон, часть директивы. Я предполагаю, что создание атрибута в html <answers> позволяет нам свободно использовать массив choices в наших библиотеках li?
Показать ещё 1 комментарий
2

Это потому, что ваш код HTML вы вводите здесь

var textnode = document.createElement("add-answers");

не компилируется угловым (и поэтому ваша директива не разрешена).

Мое предложение состоит в том, чтобы вместо этого использовать ng-repeat, поэтому ваш контент будет скомпилирован (и ваша директива будет построена корректно, более угловым способом), например:

<add-answers ng-repeat="answer in answers"> </add-answers>

Делая это, вам нужно иметь ответы массива в своей области, что вы можете выполнить таким образом в своей функции addAnswer:

$scope.answers = [];
$scope.addAnswer = function(){    
   var node = document.createElement("LI");

   $scope.answers.push({}); //new Answers
};

,

Если вам все еще нужно использовать javascript для инъекции ваших компонентов (sic !, не делайте этого!), Вам нужно будет использовать службу компиляции $.

Поделиться
  • 0
    Когда я делаю это, я могу динамически создавать столько входов, сколько захочу. Однако, когда я заполняю 1 коробку, все они заканчивают тем, что наполняются тем же самым содержанием. Кроме того, нужно ли помещать объект внутрь, можно ли вместо этого сделать индекс массива? То, что я пытаюсь сделать - это иметь 3 поля ввода с самого начала, и тогда я могу создать столько, сколько захочу, нажав кнопку. Я хочу, чтобы все эти входы в конечном итоге в массиве ответов.
  • 0
    Затем вы можете начать с массива 3: $ scope.answers = [{}, {}, {}] и следовать за ответом @csschapker с помощью ng-модели (см. Использование [$ index])

Ещё вопросы

Сообщество Overcoder
Наверх
Меню