動態添加指令，但內容不顯示

我是新來的角，我試圖創建一個投票投票應用程序。現在我有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 =長度的數組。但是，當我這樣做時，添加新元素時，陣列不會獲得更大的插槽。

來源

2016-08-18 nj51

這裏有一個更好的例子一個普拉克：根據你的選擇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>

來源

2016-08-18 17:14:52 csschapker

plunk顯示了我也意味着使用指令。我的答案基本上就是這個想法。 – csschapker

嘿，那個搶劫者真的幫了忙。我想我有我想要的功能。唯一令人困惑的部分是爲什麼我們在html元素中有選擇=「選擇」，還有指令的模板，範圍部分。我的猜測是使html 中的屬性允許我們在我們的li中自由使用選擇數組？ – nj51

你可以查看Angular的[directive]文檔（https://docs.angularjs.org/guide/directive）。它從指令的角度解釋了什麼範圍。在這種情況下，我們將$ scope.choices（從控制器）綁定到也稱爲選擇的指令範圍的值。 '選擇：'=''表示我們將使用父範圍的2路綁定到指令。 – csschapker

那是因爲你的HTML代碼，您注射這裏

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

不受角度編譯（所以你的指令沒有解決）。

我的建議是使用NG重複代替，所以你的內容將被編譯（和你的指令將妥善建造，更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注入您的組件（原文如此，請不要這麼做！），那麼您將需要使用$compile服務。

來源

2016-08-18 17:12:08 Luxor001

當我這樣做，我能爲我要動態地創建儘可能多的投入。但是，當我填寫1個框時，他們最終都會得到相同的內容。此外，它是否必須推入一個對象，我可以做數組索引嗎？我想要完成的是從一開始就有3個輸入框，然後我可以通過單擊按鈕創建更多按鈕。我希望所有這些輸入都以一系列答案結束。 – nj51

然後，您可以從3：$ scope.answers = [{}，{}，{}]的數組開始，然後按照ngc模型使用@csschapker答案（請參見使用[$ index]） – Luxor001

動態添加指令，但內容不顯示

回答

相關問題