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

Я новичок в угловом и пытаюсь создать приложение для голосования. Сейчас у меня 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>

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

источник

2016-08-18 nj51

Вот звенеть с лучшим примером: http://plnkr.co/edit/gSWHCxgagMrF4OoEZDh1?p=preview

Вы можете просто нг-повтор на основе вашего выбора.

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

источник

2016-08-18 17:14:52 csschapker

Плунж показывает, что я означает также использование директивы.Мой ответ - это, по сути, только идея. – csschapker

Эй, плункер действительно помог. Я думаю, что у меня есть предполагаемая функциональность, которую я искал. Единственная запутанная часть - почему у нас есть выбор = «выбор» в элементе html, а также шаблон, область действия этой директивы. Мое предположение заключается в том, что атрибут в html позволяет нам свободно использовать массив выбора в наших li? – nj51

Вы можете проверить документацию Angular для [директивы] (https://docs.angularjs.org/guide/directive). В нем объясняется, какой объем с точки зрения директив. В этом случае мы привязываем $ scope.choices (от контроллера) к значению области директив, также называемой выбором. 'choice: '='' говорит, что мы будем использовать привязку 2-way от родительской области к директиве. – csschapker

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

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

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

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

<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 !, не делайте этого!), То вам нужно будет воспользоваться услугой $compile.

источник

2016-08-18 17:12:08 Luxor001

Когда я делаю это, я могу динамически создавать столько входов, как я хочу. Однако, когда я заполняю 1 коробку, все они заканчиваются тем же содержимым. Кроме того, нужно ли ему вставлять объект, могу ли я сделать индекс массива? То, что я пытаюсь выполнить, состоит из трех полей ввода с самого начала, а затем я могу создать столько, сколько захочу, нажав кнопку. Я хочу, чтобы все эти материалы попадали в массив ответов. – nj51

Затем вы можете начать с массива из 3: $ scope.answers = [{}, {}, {}] и следовать за ответом @csschapker с помощью ng-model (см. Использование [$ index]) – Luxor001

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

ответ

Смежные вопросы