Question

我是角色的新手，我正在尝试创建投票调查应用。现在我有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 =到数组的长度。但是，当我这样做时，在添加新元素时，数组不会使插槽更大。

Answer 1

那是因为你在这里注入的HTML代码

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

不是由angular编译的（所以你的指令没有被解析）。

我的建议是使用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来注入你的组件（原文！不要这样做！）那么你需要使用$compile服务。

Answer 2

这里有一个更好的例子：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>

动态添加指令但内容未显示

2 个答案: