AngularJ에서 양방향 바인딩을 사용하는 방법

이 글은 주로 AngularJ의 양방향 바인딩 원리(데이터 바인딩 메커니즘)를 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴볼까요?

그럼 양방향 바인딩이 무엇인지 아래에서 간단히 설명하겠습니다.

먼저 데이터 바인딩을 이해해야 합니다. 우리가 보는 웹사이트 페이지는 데이터와 디자인이라는 두 부분으로 구성됩니다. 디자인을 브라우저가 이해할 수 있는 언어로 변환하는 것이 HTML과 CSS가 주로 하는 일입니다. 페이지에 데이터를 표시하고 특정 대화형 효과(예: 클릭, 기타 사용자 작업 및 해당 페이지 반응)를 갖는 것이 js의 주요 작업입니다. 데이터를 업데이트할 때마다 페이지를 새로 고칠 수 없는 경우가 많습니다(요청 가져오기). 대신 백엔드에서 관련 데이터를 요청하고 새로 고치지 않고 로드하여 페이지를 업데이트(요청 게시)합니다. 그런 다음 데이터가 업데이트된 후 페이지의 해당 위치가 자동으로 해당 수정을 수행할 수 있으며 이는 데이터 바인딩입니다.

이전 개발 모델에서 이 단계에서는 일반적으로 jq를 사용하여 DOM 구조를 조작하여 페이지를 업데이트했습니다. 그러나 이로 인해 많은 코드와 많은 작업이 발생합니다. 처음에 백엔드에서 얻은 데이터로 페이지에서 수행해야 할 작업을 결정할 수 있다면 데이터가 변경되면 페이지의 관련 내용도 자동으로 변경되므로 프런트 엔드 개발이 크게 촉진됩니다. 최종 엔지니어. 새로운 프레임워크(angualr, React, vue 등)에서는 데이터를 모니터링하여 변경 사항이 발견되면 작성된 규칙에 따라 페이지가 수정되어 데이터 바인딩이 구현됩니다. 데이터 바인딩은 VM(모델-뷰, 데이터와 페이지 간의 변환 규칙)을 통해 M(모델, 데이터)을 V(뷰)로 수정한 것을 알 수 있다.

양방향 바인딩은 역방향 경로를 추가합니다. 사용자가 페이지를 조작(예: 입력에 값 입력)하면 데이터가 시간에 따라 변경될 수 있으며, 데이터 변경에 따라 페이지의 다른 부분에 해당 수정이 이루어집니다. 일반적인 예는 Taobao의 장바구니입니다. 상품 수량이 변경되면 상품 가격도 시간에 따라 변경될 수 있습니다. 이는 VM-VM-V의 양방향 바인딩을 달성합니다.

AngularJs는 데이터 변경 사항을 수신하고 뷰를 업데이트하기 위해 범위 모델에 수신 대기열을 설정합니다. 뷰(html)에 무언가를 바인딩할 때마다 AngularJ는 $watch 대기열에 $watch를 삽입하여 모니터링하는 모델에 변경 사항이 있는지 감지합니다. $digest 루프는 브라우저가 각도 컨텍스트에서 처리할 수 있는 이벤트를 수신할 때 실행됩니다. $digest는 모든 $watch를 반복합니다. 따라서 DOM을 업데이트합니다.

$watch

현재 범위 $scope에서 $watchers 모니터를 만들고 $watchers는 모든 $watches를 관리합니다. 이를 UI에 바인딩하면 자동으로 $watch를 만들고 $watchers에 넣습니다.

controller.js

app.controller('MainCtrl', function($scope) {
 $scope.Hello = "Hello";
 $scope.world = "World";
});

index.html

<p>{{Hello}}</p>

여기서 $scope, 에 두 개의 변수를 추가해도 하나만 UI에 바인딩되므로 여기서는 하나만 생성됩니다. watch

$digest

브라우저가 각도 컨텍스트에서 처리할 수 있는 이벤트를 수신하면 $digest 루프가 트리거됩니다. $digest는 $watch를 탐색합니다. $watch에 변경 사항이 없으면 루프 감지가 중지됩니다. 하나라도 업데이트되면 모든 $watch에 변경 사항이 없을 때까지 루프가 다시 트리거됩니다. 이렇게 하면 각 모델이 다시 변경되지 않습니다. 이것이 더티 검사 메커니즘입니다

controller.js

app.controller('MainCtrl', function() {
 $scope.name = "Foo";

 $scope.changeFoo = function() {
  $scope.name = "Bar";
 }
});

index.js

<p>{{ name }}</p>
<button ng-click="changeFoo()">Change the name</button>

1. 버튼을 누르면

2. 브라우저가 이벤트를 수신하고 각도 컨텍스트로 들어갑니다.

3. $digest 루프가 실행되기 시작하여 각 $watch가 변경되는지 쿼리합니다.

4. $scope.name을 모니터링하는 $watch가 변경 사항을 보고하므로 또 다른 $digest 주기가 강제 실행됩니다.

5. 변경 사항이 감지되지 않은 새로운 $digest 루프.

6. $scope.name의 새 값에 해당하는 DOM 부분을 업데이트합니다.

$apply

$apply UI를 새로 고친다는 뜻으로 직접적으로 이해할 수 있습니다. 이벤트가 트리거될 때 $apply를 호출하면 각도 컨텍스트에 들어갑니다. 호출되지 않으면 들어가지 않으며 후속 $digest 감지 메커니즘이 트리거되지 않습니다

app.directive('clickable', function() {
 return {
  restrict: "E",
  scope: {
  foo: '='
  },
  template: &#39;<ul style="background-color: lightblue"><li>{{foo}}</li></ul>&#39;,
  link: function(scope, element, attrs) {
  element.bind(&#39;click&#39;, function() {
   scope.foo++;
   console.log(scope.foo);
  });
  }
 }
});

클릭 가능한 명령어를 호출하면 foo의 값이 증가했지만 인터페이스에 표시되는 내용은 변경되지 않은 것을 확인할 수 있습니다. $digest 더티 감지 메커니즘이 트리거되지 않으며 foo를 감지하는 $watch가 실행되지 않습니다.

$apply() 메소드의 두 가지 형태

1) 매개변수 없음

$scope.$apply();

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

이 형태를 사용할 때,scope.$apply 이전 프로그램에서 예외가 발생하면,scope.$apply는 실행되지 않고, 인터페이스는 업데이트되지 않습니다

2) 매개변수가 있습니다

$scope.$apply(function(){
 ...
})

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

이 양식을 사용하면 나중에 예외가 발생하더라도 데이터가 계속 업데이트됩니다.

AngularJS에서 $watch 사용

일반적인 사용법:

$scope.name = 'Hello';
$scope.$watch('name', function(newValue, oldValue) {
 if (newValue === oldValue) { return; } 
 $scope.updated++;
});

传入到$watch()中的第二个参数是一个回调函数，该函数在name的值发生变化的时候会被调用。

如果要监听的是一个对象，那还需要第三个参数：

$scope.data.name = 'Hello';
$scope.$watch('data', function(newValue, oldValue) {
 if (newValue === oldValue) { return; } 
 $scope.updated++;
}, true);

表示比较的是对象的值而不是引用，如果不加第三个参数true，在 data.name 变化时，不会触发相应操作，因为引用的是同一引用。

总结

1) 只有在$scope变量绑定到页面上，才会创建 $watch

2) $apply决定事件是否可以进入angular context

3) $digest 循环检查model时最少两次，最多10次(多于10次抛出异常，防止无限检查)

4) AngularJs自带的指令已经实现了$apply，所以不需要我们额外的编写

5) 在自定义指令时，建议使用带function参数的$apply

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在javaScript中如何使用手机号码校验工具类PhoneUtils

在微信小程序中如何实现下载进度条

在微信小程序中如何使用video组件播放视频

在微信小程序中如何使用audio组件

在微信小程序中有关功能函数总结（详细教程）

위 내용은 AngularJ에서 양방향 바인딩을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!