각도에서 ng-bind 대 한 번 바인딩의 차이점은 무엇입니까?

각도에서 ng-bind 대 한 번 바인딩의 차이점은 무엇입니까?

각도 js에서 "ng-bind"와 "one time binding"의 차이점은 무엇입니까?

다른 점이 있다면 각각 어디에 사용해야 합니까?

양방향 데이터 바인딩

Angular에서 이원 데이터 바인딩JS는 모델에서 뷰로 데이터를 바인딩하는 것을 의미하며, 그 반대의 경우도 마찬가지입니다(데이터는 스코프/컨트롤러에서 뷰로, 뷰에서 스코프/컨트롤러로 흐릅니다).'ng-model'은 양방향 데이터 바인딩을 달성하는 데 사용되는 각 지시어입니다.뷰가 업데이트된 데이터를 요구하는지 여부에 관계없이 스코프/컨트롤러에서 해당 모델에 대한 모든 수정 사항이 뷰로 자동 전파되며 뷰에서 해당 모델에 대한 수정 사항은 즉시 스코프/컨트롤러에 반영됩니다.

단방향 데이터 바인딩

Angular에서 단방향 데이터 바인딩JS는 모델에서 뷰로 데이터를 바인딩(범위/컨트롤러에서 뷰로 데이터 흐름)하는 것을 의미합니다.'ng-bind'는 단방향 데이터 바인딩을 달성하기 위해 사용되는 각 지시어입니다.바인딩 후에는 뷰가 업데이트된 데이터를 요구하는지 여부에 관계없이 스코프/컨트롤러에서 해당 모델에 대한 수정 사항이 자동으로 뷰로 전파됩니다.뷰에서 컨트롤러로 모델을 변경할 경우 전파가 발생하지 않습니다.

일회성 데이터 바인딩

이름에서 알 수 있듯이 바인딩은 첫 번째 다이제스트 사이클에서 한 번만 발생합니다.일회성 바인딩을 사용하면 첫 번째 다이제스트 사이클에서 컨트롤러가 설정한 값에서 모델이나 뷰를 한 번 업데이트할 수 있습니다.AngularJS 1.3부터는 ":" 토큰을 사용하여 일회성 데이터 바인딩을 만들 수 있습니다.값이 안정화되면 자체 $watch() 함수의 등록을 취소하는 바인딩입니다(기본적으로 값이 정의됨).

1회 바인딩은 페이지가 안정된 후에도 변경되지 않는 값에 사용됩니다."안정"은 일반적으로 식에 값이 할당되었음을 의미합니다.값을 설정한 후 컨트롤러에서 값을 변경하면 페이지가 다시 로드될 때까지 표시된 값이 변경되지 않습니다.구문은 {{::expression}}입니다.

따라서 페이지가 안정된 후에도 변경되지 않는 값 또는 목록의 경우 항상 일회성 바인딩을 사용합니다.이렇게 하면 애플리케이션에서 불필요한 감시자의 수가 줄어듭니다.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="customer in ::customers" >
    {{::customer.name}}
    ({{customer.address}})
      <button ng-click="change(customer)">Change</button>
     </div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.customers = [{
        name: 'Gloria Jane',
        address: 'Silo Park, 9300 East Orchard Road,    Greenwood Village, CO, 80114'},{
        name: 'Nicholas Michael',
        address: 'Village Park,  East Lake Avenue, Aurora, CO, 80016'
    }];
  
    $scope.change = function(customer) {
        customer.address = 'Cherry Creek State Park, 4201 S Parker Rd, Aurora, CO 80014, USA';
        customer.name ='Tessy Thomas';
    };
});
</script>

이것들은 상호 배타적인 개념이 아닙니다.ng-bind로 한 번 바인딩할 수도 있습니다.

<divg-bind="::상품명">/div>

"ng-bind"는 단순히 Angular의 html 속성 버전입니다.JS의 정규 {{expression} 구문입니다.

그렇게,<div ng-bind="productName"></div>와 동치입니다.<div>{{productName}}</div>.

1회 바인딩은 페이지가 안정된 후에도 변경되지 않는 값에 사용됩니다."안정"은 일반적으로 식에 값이 할당되었음을 의미합니다.값을 설정한 후 컨트롤러에서 값을 변경하면 페이지가 다시 로드될 때까지 표시된 값이 변경되지 않습니다.

과 같습니다.{{::expression}}. 위의 예를 따르자면, 구문은

<div>{{::productName}}</div>

페이지가 안정적인지 여부를 결정하는 데 사용되는 알고리즘에 대한 전체 설명은 다음과 같습니다.

https://docs.angularjs.org/guide/expression

양방향 데이터 바인딩

양방향 데이터 바인딩을 사용하면 범위에 있는 속성의 값을 쉽게 가져와 보기에 표시할 수 있으며, 텍스트 입력을 통해 무분별한 논리 없이 업데이트할 수 있습니다.

일회용 데이터 바인딩

첫째, 이것은 일방적인 데이터 바인딩이 아니라는 점을 분명히 지적하고 싶습니다.그러한 것은 Angular가 제공하는 관례로서 실제로 존재하는 것이 아닙니다.일회성 바인딩을 사용하면 첫 번째 다이제스트 사이클에서 컨트롤러가 설정한 값에서 모델이나 뷰를 한 번 업데이트할 수 있습니다.

간단히 말하면 이렇게 이해했습니다.

이원 데이터 바인딩 - ng-model

두 링크를 연결합니다.{{}}및 (HTML 에서)$scope(컨트롤러에서) 변수의 값을 업데이트하고 변경 사항이 발생할 경우 해당 변수의 값을 업데이트합니다.

단방향 데이터 바인딩 - ng-bind

링크만 위치$scope{{}}, 하지만 그 반대는 아닙니다.

언급URL : https://stackoverflow.com/questions/33480548/what-is-the-difference-between-ng-bind-vs-one-time-binding-in-angular