動的に追加されたディレクティブですが、内容が表示されません

私は新しい角度にあり、投票投票アプリケーションを作成しようとしています。今私は4つの入力ボックスを持っています。新しい投票を作成するときに使用する1つの質問と3つの回答。別の回答を追加する場合は、新しい入力ボックスを追加するボタンもあります。 DOMにコンテンツを動的に配置したい場合は、ディレクティブを使用する必要があります。私は、他のコンテンツと一緒に配列にあるコンテンツにアクセスできるように、ng-model属性を追加する必要のある新しいhtmlコンテンツを追加するものを作成しました。元々そこにあった入力ボックスは正常に動作しますが、新しいボックスを追加するとそのボックスにはアクセスしません。動的に追加されたディレクティブですが、内容が表示されません

指令/ファンクションコード：入力ボックスのリストに新しいディレクティブを追加します

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 =を配列の長さにします。しかし、これを行うと、新しい要素を追加するときに配列がスロットを大きくしません。あなたのHTMLコードは、あなたがここに

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

注入されているためです

出典

2016-08-18 nj51

はここで、より良い例とplunkです。

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

plunkは私ディレクティブを使用することを意味します。私の答えは本質的に単なるアイデアです。 – csschapker

ねえ、プランカが本当に助けてくれました。私は私が探していた意図した機能を持っていると思います。唯一混乱する部分は、html要素に "choices"という選択肢があり、またディレクティブのテンプレートであるscopeの部分がある理由です。私の推測では、HTMLの属性を作っています私たちは私たちの李の中で自由に選択配列を使用することができますか？ – nj51

[指令]（https://docs.angularjs.org/guide/directive）のAngularの文書をチェックすることができます。それは、指示の観点からどの範囲があるかを説明します。この場合、$ scope.choices（コントローラから）をchoicesというスコープの値にバインドしています。 'choices： '=''は、親スコープからディレクティブへの2ウェイバインディングを使用すると述べています。 – csschapker

が、角度によってコンパイルされていない（ので、あなたのディレクティブは解決されません）。

私の提案は、あなたのコンテンツがコンパイルされます（そして、あなたのディレクティブがよりangularjsな方法で、適切に構築されます）ので、このように、代わりにNGリピートを使用することです。これにより

<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サービスを使用する必要があります。あなたの選択に基づいてhttp://plnkr.co/edit/gSWHCxgagMrF4OoEZDh1?p=preview

あなただけの可能性がngのリピート：

出典

2016-08-18 17:12:08 Luxor001

私はこれを行うと、私は私が望むように動的として多くの入力を作成することができています：それは見やすいですので

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

は、ここに私のplunkからいくつかのものです。しかし、1つのボックスに記入すると、すべてが同じ内容でいっぱいになります。また、オブジェクトをプッシュする必要がありますか、代わりに配列インデックスを行うことはできますか？私が達成しようとしているのは、そこから始めて3つの入力ボックスを持っていて、ボタンをクリックするだけで、もっとたくさんのものを作ることができます。私は、これらのすべての入力が一連の答えで終わるようにしたい。 – nj51

次に、3つの配列で始めることができます：$ scope.answers = [{}、{}、{}]そして@csschapkerに従ってくださいng-model（[$ index]の使用を参照してください） – Luxor001

動的に追加されたディレクティブですが、内容が表示されません

答えて

関連する問題