동적으로 추가 된 지시문이지만 내용이 표시되지 않습니다.

새로운 각도이며 투표 설문 조사 응용 프로그램을 만들려고합니다. 지금은 4 개의 입력 상자가 있습니다. 새 설문 조사를 작성할 때 사용하는 질문과 대답이 각각 1 개씩 있습니다. 또 다른 대답을 추가하려면 새로운 입력 상자를 추가하는 버튼이 있습니다. 나는 내용을 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 =을 배열의 길이로 설정하려고합니다. 그러나이 작업을 수행하면 배열에 새 요소를 추가 할 때 슬롯이 커지지 않습니다. HTML 코드는 여기

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

주입되기 때문이다

출처

2016-08-18 nj51

여기에 더 나은 예와 쿵하는 소리입니다.

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에서 속성을 만들고있다 우리가 우리의 자유에서 선택 배열을 자유롭게 사용할 수 있습니까? – nj51

[지침] (https://docs.angularjs.org/guide/directive)에 대한 Angular의 설명서를 확인할 수 있습니다. 지시어의 관점에서 어떤 범위가 있는지 설명합니다. 이 경우 $ scope.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 
};

자바 스크립트를 사용하여 구성 요소를 주입해야하는 경우 (그러지 마세요!) $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>

은 여기 내 쿵하는 소리에서 몇 가지 물건입니다. 그러나 1 칸을 채우면 모두 동일한 내용으로 채워집니다. 또한 객체를 밀어 넣어야합니까? 대신 배열 인덱스를 사용할 수 있습니까? 내가 시작하려고하는 것은 처음부터 3 개의 입력 상자가 있고 단추를 클릭하여 원하는만큼을 만들 수 있습니다. 나는이 모든 입력이 일련의 대답으로 끝나기를 바랍니다. – nj51

그런 다음 3 배열을 시작할 수 있습니다 : $ scope.answers = [{}, {}, {}] 그리고 @csschapker 응답을 따르십시오 ng-model ([$ index]의 사용을 참조하십시오) – Luxor001

동적으로 추가 된 지시문이지만 내용이 표시되지 않습니다.

답변

관련 문제