ng-repeat 내에서 ng-click에 의해 호출되는 할당식 동작
다음을 사용하여 모델을 업데이트하려고 합니다.ng-click에 접속되어 있다<p>.
외부에서의 과제 표현에는 문제가 없습니다.ng-repeat또는 내부 스코프 메서드를 호출하여ng-repeat하지만, 만약 내가 그 안에 있는 과제를 사용한다면ng-repeat무시되는 것 같습니다.Firefox 콘솔에 보고된 메시지는 없지만 이벤트가 발생하는지 확인하기 위해 중단점을 설정해 보지 않았습니다.
<!DOCTYPE html>
<html>
<head>
<title>Test of ng-click</title>
<script type='text/javascript' src='http://code.angularjs.org/1.1.1/angular.js'></script>
<script type='text/javascript'>//<![CDATA[
function MyCtrl($scope) {
$scope.selected = "";
$scope.defaultValue = "test";
$scope.values = ["foo", "bar", "baz"];
$scope.doSelect = function(val) {
$scope.selected = val;
}
}
//]]>
</script>
</head>
<body ng-app>
<div ng-controller='MyCtrl'>
<p>Selected = {{selected}}</p>
<hr/>
<p ng-click='selected = defaultValue'>Click me</p>
<hr/>
<p ng-repeat='value in values' ng-click='selected = value'>{{value}}</p>
<hr/>
<p ng-repeat='value in values' ng-click='doSelect(value)'>{{value}}</p>
</div>
</body>
</html>
원하시면 바이올린이 여기 있습니다(몇 가지 이전 모델과 함께).
디렉티브 ngRepeat은 반복마다 새로운 범위를 작성하기 때문에 부모 범위에서 변수를 참조해야 합니다.
사용하다$parent.selected = value예를 들어 다음과 같습니다.
<p ng-repeat='value in values' ng-click='$parent.selected = value'>{{value}}</p>
참고: 시제품 상속으로 인해 함수 호출이 전파됩니다.
자세한 내용은 다음을 참조하십시오.Scope 프로토타입 상속의 뉘앙스.
@Stewie가 언급했듯이 $parent는 이 문제를 해결하는 하나의 방법입니다.단, (Angular 팀이 권장하는) 솔루션은 $scope에 기본 속성을 정의하지 않는 것입니다.$scope는 모델을 참조해야 합니다.참조를 사용하면 (같은 이름의 부모 스코프 속성을 숨기거나 음영으로 만드는 하위 스코프에는 원시 속성이 생성되지 않으므로) $parent를 사용해야 할 시기를 기억할 필요가 없습니다.
HTML:
<p>Selected = {{model.selected}}</p>
<hr/>
<p ng-click='model.selected = defaultValue'>Click me</p>
<hr/>
<p ng-repeat='value in values' ng-click='model.selected = value'>{{value}}</p>
<hr/>
<p ng-repeat='value in values' ng-click='doSelect(value)'>{{value}}</p>
JavaScript:
$scope.model = { selected: ""};
...
$scope.doSelect = function (val) {
$scope.model.selected = val;
}
최근 @Stewie가 언급한 Wiki 페이지를 업데이트하여 이 방법을 항상 권장하고 있습니다.
언급URL : https://stackoverflow.com/questions/15388344/behavior-of-assignment-expression-invoked-by-ng-click-within-ng-repeat
'source' 카테고리의 다른 글
| Typescript 인터페이스 기본값 (0) | 2023.03.20 |
|---|---|
| 예쁜 영구 링크 목록 및 게시 제목 내보내기 (0) | 2023.03.20 |
| 리액트 리덕스 접속 컴포넌트를 유닛 테스트하는 방법 (0) | 2023.03.20 |
| Gson - 동일한 필드 이름, 다른 유형 (0) | 2023.03.20 |
| 카트 항목 메타 업데이트 방법 - woocommerce (0) | 2023.03.15 |