집 > 기사 > 웹 프론트엔드 > Angular 데이터 바인딩 메커니즘을 사용하는 방법

Angular 데이터 바인딩 메커니즘을 사용하는 방법

php中世界最好的语言원래의: 2018-06-07 15:07:252356검색

이번에는 Angular 데이터 바인딩 메커니즘을 사용하는 방법과 Angular 데이터 바인딩 메커니즘을 사용할 때 주의 사항이 무엇인지 보여 드리겠습니다. 다음은 실제 사례입니다.

1. Angular.js는 브라우저의 이벤트 루프를 확장합니다.

브라우저는 사용자 상호 작용과 같은 이벤트를 계속 기다립니다. 태그에 문자를 입력하면 이 이벤트의 콜백 함수가 JS 인터프리터에 포함된 DOM 작업을 수행합니다. 실행이 완료된 후 브라우저는 이에 따라 DOM을 변경합니다. Angular는 이 이벤트 루프를 확장하여 때때로 각도 컨텍스트의 실행 환경이 됩니다.

2.$watch list

$watch는 모델의 변화를 감지할 수 있습니다. 데이터 조각이 뷰에 바인딩될 때마다 해당 $watch가 $watch 대기열에 삽입됩니다. 그 예시는 다음과 같습니다.

controller.js:

app.controller('MainCtrl', function($scope) {
 $scope.people = [...]; // 假设长度为10
});

index.html:

<ul>
 <li ng-repeat="person in people">
   {{person.name}} - {{person.age}}
 </li>
</ul>

그 중 ng-repeat는 1개의 $watch를 생성하고, 각 사람은 2개의 $watch를 생성하며, 총합은 (1+2*10)입니다. ) , 21 $시계. $watch의 생성 단계는 템플릿 로딩이 완료되는 단계, 즉 연결 단계입니다. (Angular는 컴파일 단계와 연결 단계로 나뉩니다.) Angular는 각 지시문을 찾은 다음(위 예에서 ng-repeat와 {{}}는 모두 지시문에 속함) 각 $watch를 생성합니다.

3.$digest 루프

브라우저가 각도 컨텍스트와 관련된 이벤트를 수신하면 $digest 루프가 트리거됩니다. 이는 2개의 작은 루프로 구성됩니다. 하나는 evalAsync 대기열을 처리하고 다른 하나는 $watch 대기열을 처리합니다. $digest가 반복되면 $watch 대기열을 순회하여 데이터가 업데이트되었는지 확인합니다. 이 순회를 더티 검사에서 $watch가 업데이트되었음을 발견하면 All까지 새로운 더티 검사가 트리거됩니다. $watches는 업데이트되지 않습니다. 이렇게 하면 각 모델이 변경되지 않습니다.

더티 검사가 10회를 초과하면 무한 루프를 방지하기 위해 예외가 발생합니다. $digest 루프가 끝나면 그에 따라 DOM이 변경됩니다. 실제로 $digest의 문자 그대로의 의미는 모든 영양소를 점차적으로 흡수하는 "소화" 과정과 같습니다($watch의 변화).

4. $apply를 통해 각도 컨텍스트를 입력합니다.

$apply는 ng-model과 같은 angualr의 자체 지시어를 사용하여 이벤트를 캡슐화합니다. $적용 중간. 예를 들어 ng-model="name"의 입력 상자에 문자 "w"를 입력하면 이벤트는 $apply("name='w';")를 호출하여 $scope에서 데이터 업데이트를 완료합니다.

타사 라이브러리를 호출할 때 데이터 바인딩

Angular에서 jquery를 호출할 때 jquery가 $apply를 호출하지 않고 이벤트가 각도 컨텍스트에 들어가지 않아 $digest가 발생하지 않기 때문에 jquery로 바인딩된 데이터를 업데이트할 수 없습니다. 처형되고 있습니다.

app.js

 app.directive('clickable', function() {
  return {
   restrict: "E",
   scope: {
    count1: '=',
    count2: '='
   },
   template: '<ul style="background-color: lightblue"><li>{{count1}}</li><li>{{count2}}</li></ul>',
   link: function(scope, element, attrs) {
    element.bind('click', function() {
     scope.count1++;
     scope.count2++;
    });
   }
  }
});
app.controller('MainCtrl', function($scope) {
 $scope.count1= 0;
 $scope.count2= 0;
});

예제에서는 요소를 클릭할 때마다 count1과 count2가 1씩 증가할 것으로 예상되지만 실제로는 그렇지 않습니다. 실제로 $scope(ViewModel)이 변경되었지만 $digest가 적용되지 않습니다. 클릭 이벤트를 다음과 같이 수정하세요.

element.bind('click', function() {
 scope.$apply(function() {
   scope.foo++;
   scope.bar++;
 });
})

$apply를 호출하면 기대한 결과가 달성됩니다.

5. 요약

angular 이벤트 바인딩 메커니즘은 다음과 같습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트에서!