각 지시문 주석 섹션

Question

나는 많은 기사를 표시하는 웹 사이트에서 일하고 있습니다. 각 기사에는 의견 섹션이 있습니다. 나는 효과적으로 ng-repeat 내부에서 재귀 적으로 DOM에 주석을 재 작성할 수 있었다. 그러나 어떤 코멘트 (중첩 된 방식으로 표시)에서 응답 버튼을 클릭하고 클릭 한 버튼 아래에 div를 삽입 할 수 있어야합니다. 이 div에는 제출할 댓글의 텍스트 영역과 버튼이 포함됩니다. 이 두 번째 버튼을 클릭하면 컨트롤러는 데이터베이스에 주석을 저장합니다. 처음에는 컨트롤러에서 DOM을 직접 조작하여이 작업을 수행하려고했습니다. 그러나 추가 연구를 통해 MVC/MVW 패턴을 직접 위반하게됩니다. 정답은 사용자 지정 지시문을 작성하는 것입니다. 이 작업을 올바르게 수행하는 방법에 대해 약간의 통찰력을주십시오. 모든 정보가 도움이 될 것입니다. 미리 감사드립니다.

Answer 1

이것을 달성하기 위해 지시를 내릴 필요는 없습니다.

HTML :

<div ng-repeat="article in articles"> 
    <p>{{article.content}}</p> 
    <input type="text" ng-model="article.response"></input> 
    <button ng-click="sendResponse(article)">Send</button> 
</div> 

JS : 물론

myApp.controller("articlesController", function($http){ 

    $scope.sendResponse = function (article) { 
    console.log(article.response); 
    $http.post(url, article); 
    }; 
}); 

, 당신은 hidding 입력에 의해 더 잘 할 버튼을 보내고, 응답 버튼을 통해 사용자가 클릭 후를 표시 할 수 있습니다.

Answer 2

당신이 응답 DIV의 dinamically 추가하려면 :

<div ng-repeat="article in articles" id="article-{{$index}}"> 
    <p>{{article.content}}</p> 
    <button ng-click="addAnswer($index)">Add Answer</button> 
</div> 

JS :

myApp.controller("articlesController", function($compile){ 
    $scope.addAnswer = function (index) { 
    var div = $("<div></div>"); 
    var input = $("<input type='text' ng-model='article.response'></input>"); 
    div.append(input); 
    var button = $("<button>Send</button>"); 
    button.attr("ng-click", "sendResponse(article)"); 
    $compile(div)($scope); 
    $("#article-" + index).append(div); 
    }; 
});