2013-06-26 3 views
-2

컨트롤러 내부에서 ng-click을 사용하여 요소의 jQuery를 통해 DOM 객체를 가져와야합니다.콘트롤러에서 객체 가져 오기

HTML

<ul> 
    <li ng-repeat="data in list"> 
     <span ng-click="editMode(this, data.id)">edit</span> 
    </li> 
</ul> 

컨트롤러

$scope.editMode = function(obj, id) { 
    $(obj).hide(); //do not use jQuery hide() in angular! I's just a test! 
} 

변수 OBJ은 요소를 가지고,하지만 난 그것을 작동하지 않을 수 있습니다. 시도하면 $ (obj) .hide(); 아무 일도 발생하지 않습니다.


편집 :이 각도의 요소를 숨길 수있는 올바른 방법이 아니다! 예제로 사용되었습니다! ng-hide로 요소를 숨 깁니다.

+2

http://jsfiddle.net/mVCkY/ 내가 = 각 방법은 NG 쇼 '의 라인에 더 많은 것 같아요'(정확한 구문에 대한 확실하지)가 아니라 "isInEditMode!": 여기

예 바이올린입니다 외부 DOM 조작 – Esailija

+0

아래의 설명에서 말했듯이 이것은 테스트 용이었습니다. 나는 ng-hide와 ng-show를 안다. 감사! – StinsonMaster

+0

같은 jQuery 메서드에 적용됩니다. 그냥 숨기기가 아닙니다. – Esailija

답변

3

예제에서 this은 요소가 아닌 현재 각도 인 $scope을 나타냅니다.

$scope.editMode = function(e, id) { 
    $(e.target).hide(); 
}; 

:

<span ng-click="editMode($event, data.id)">edit</span> 

그런 다음 핸들러에서 대상 요소에 액세스 할 수있는 요소를 얻을 수있는 가장 쉬운 방법은 이벤트 객체를 통과하는 것이 좋은 간주되지 않습니다 각도로 연습하십시오. editMode 함수가 요소를 숨기고 아무 것도하지 않는다고 가정하면 질문에 언급 된대로 ng-hide 또는 ng-show 지시문을 사용하여이를 수행 할 수 있습니다.

+2

정말요? 당신의 해결책은'ng-hide'를 사용하여 선언적으로 해결할 수있는 무언가를위한 DOM 조작을하는 것입니다. _bad_ Angular입니다. 더 이상 - 이것은 테스트 할 수없는 것처럼 보입니다. 개념적으로이 함수가 실행될 때 일부 이벤트의 대상이 아닌 요소를 숨기는 것입니다. –

+0

@BenjaminGruenbaum - 내 솔루션은 현재의 형태로 질문에 대답하고 있습니다. 동의합니다. 이상적인 각도 솔루션이 아닙니다. 나는 또한 실제로 함수가 단순히 요소를 숨기는 것 이상의 기능을한다고 가정합니다. –

+1

@JamesAllardice는 대체 경로가 바람직 함을 제안합니다. 나쁜 습관을 말하지 않고 나쁜 습관을 가르치는 것에 대한 대답입니다. –

4

내 의견에 말했듯이, 당신은 뒷받침 데이터 모델을 가지고 귀하의 각 html로 반응을 나타내야합니다.

<li ng-repeat="data in list"> 
    <span ng-click="editMode(data)" ng-hide="data.isInEditMode">edit</span> 
</li> 

function DataCtrl($scope) { 
    $scope.list = [{}, {}, {}]; 
    $scope.editMode = function(obj) { 
     obj.isInEditMode = true; 
    }; 
};