AngularJS 지시:$scope 변경이 UI에 반영되지 않음
Angular로 커스텀 요소를 만들려고 합니다.JS 및 일부 이벤트를 바인딩하면 바인딩 함수로 사용해도 $scope.var가 UI를 업데이트하지 않습니다.
다음으로 문제를 설명하는 간단한 예를 제시하겠습니다.
HTML:
<!doctype html>
<html ng-app="test">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl2">
<span>{{result}}</span>
<br />
<button ng-click="a()">A</button>
<button my-button>B</button>
</div>
</body>
</html>
JS:
function Ctrl2($scope) {
$scope.result = 'Click Button to change this string';
$scope.a = function (e) {
$scope.result = 'A';
}
$scope.b = function (e) {
$scope.result = 'B';
}
}
var mod = angular.module('test', []);
mod.directive('myButton', function () {
return function (scope, element, attrs) {
//change scope.result from here works
//But not in bind functions
//scope.result = 'B';
element.bind('click', scope.b);
}
});
데모 : http://plnkr.co/edit/g3S56xez6Q90mjbFogkL?p=preview
기본적으로, 나는 결속한다.click에 대한 이벤트.my-button변화하고 싶다$scope.result사용자가 버튼 B를 클릭했을 때(와 유사)ng-click:a()를 누릅니다).그러나 보기가 새 보기로 업데이트되지 않습니다.$scope.result이렇게 하면.
제가 무엇을 잘못했나요?감사해요.
이벤트 핸들러는 "Outside" Angular"라고 불립니다.따라서 이벤트 핸들러는$scopeAngular가 이러한 변경 사항을 모르기 때문에 속성이 업데이트되고 보기는 업데이트되지 않습니다.
불러$scope.$apply()이벤트 핸들러 하단에 있습니다.이렇게 하면 다이제스트 사이클이 실행되며 Angular는 에 대한 변경 내용을 알 수 있습니다.$scope(이 때문에)$watches를 사용하여 설정된 각도{{ ... }}HTML) 및 보기를 업데이트합니다.
이는 다른 문제의 결과일 수도 있지만 같은 증상이 나타날 수도 있습니다.
뷰에 할당되어 있는 상위 범위를 삭제해도 뷰의 변경은 뷰에 영향을 주지 않습니다.$apply()call. 예를 참조하십시오. 텍스트 입력을 통해 뷰 값을 변경할 수 있지만 를 클릭하면 모델이 더 이상 업데이트되지 않습니다.
나는 이것을 버그로 생각하지 않는다.오히려 어플리케이션에서 너무 해킹한 코드입니다:-)
Angular Bootstrap의 modal을 사용할 때 이 문제에 직면했습니다.첫 번째 모달의 범위로 두 번째 모달 오픈을 시도했습니다.그리고 부모 스코프가 파괴된 첫 번째 모달은 즉시 닫았습니다.
사용 제한 시간
$code(함수) {코드}}, 0);
언급URL : https://stackoverflow.com/questions/16066170/angularjs-directives-change-scope-not-reflected-in-ui
'codememo' 카테고리의 다른 글
| 애플리케이션 버전이 Spring Boot 배너에 표시되지 않습니다.txt (0) | 2023.02.22 |
|---|---|
| 기본 컨스트럭터가 없는 Jackson 서드파티 클래스 (0) | 2023.02.22 |
| 첫 페이지에서 검색 페이지에 로드 추가 버튼 추가 (0) | 2023.02.22 |
| 시스템 브라우저의 Ionic 응용 프로그램 열기 링크 (0) | 2023.02.22 |
| JSON에 대한 쿼리 언어가 있습니까? (0) | 2023.02.22 |