angularJs 명령 의 3 가지 바 인 딩 정책 을 자세히 설명 합 니 다.

오늘 은 angularJs 명령 의 3 가지 바 인 딩 전략 에 대해 이야기 하 겠 습 니 다.
회 사 는 최근 에 angularJs 를 단일 페이지 로 대량으로 사용 하면 angularJs 의 일부 구성 요 소 를 사용 하 는 것 을 피 할 수 없다.어떤 구성 요 소 는 인터넷 에 이미 만들어 진 것 이 있 기 때문에 신경 쓰 지 않 아 도 되 고 어떤 것 은 자신의 힘 으로 해 야 한다.예전 에 명령 이라는 패키지 에 대해 이해 하지 못 했 기 때문에 directive 를 사용 할 때마다 추상 성 이 좋 지 않 고 이식 성 이 떨 어 지 므 로 추상 적 으로 잘 해 야 한다.명령 중의 격 리 작용 도 메 인 을 사용 해 야 한다.격 리 작용 도 메 인 만 있 으 면 앞 뒤의 통신 문 제 를 잘 할 수 없다.통신 문 제 를 해결 하려 면 명령 중의 바 인 딩 을 사용 해 야 한다.마침 최근 에 사용 해 야 한다.그리고 명령 중의 3 가지 바 인 딩 전략 을 정리 하고 자신의 이 해 를 이야기 했다.
angularJs 에서 명령 scope 격 리 도 메 인 바 인 딩 은 세 가지 전략 이 있 습 니 다.예 를 들 어

.directive("abc",function(){
   return {
     scope:{          
        title:"@",      
        name:"=",      
        changeNum:"&"    
     } 
/*    scope        scope    ，         ，        */
/*  @             DOM        ，     @  title    */
/*  =                             ，     =  name   。                 */
/*  &              ，         ，           */
   }
})

상세 한 예 를 들다.
HTML：

<div ng-controller="test">
<div>AngularJs         </div>
<example title="titleExample" name="nameExample" send-message="parentSendMessage('example')">
</example>
</div>

설명:example 는 사용자 정의 명령 으로 명령 을 보 여 주 는 세 가지 바 인 딩 정책 입 니 다.
@을 사용 하여 title 을 연결 하여 DOM 의 속성 값 을 가 져 옵 니 다.

   directive:
   myApp.directive("example",function(){
    return {
      restrict:"E",
      scope:{
        title:"@", 
      },
      link:function($scope,element,attrs){
        console.log($scope.title); ==> titleExample
      }
    } 
   })

설명:@바 인 딩 정책 은 title 값 과 부모 역할 도 메 인의 값 을 바 꿀 수 있 습 니 다.예 를 들 어 부모 역할 도 메 인 에 있 는 속성 은 testTitle 입 니 다.명령 에 있 는 title 속성의 값 을 부모 역할 도 메 인 에 있 는 testTitle 값 과 바 꾸 고 싶 습 니 다.따라서 HTML 에서 명령 을로 바 꿀 수 있 습 니 다.이렇게 하면 우 리 는.directive 에서 하위 역할 영역 에 있 는$scope.title 을 통 해 부모 역할 영역$scope.testTitle 의 값 을 얻 을 수 있 습 니 다.
사용=을 사용 하여 name 을 연결 하여 하위 역할 영역 과 부모 역할 영역의 속성 을 양 방향 으로 연결 합 니 다.

   directive:
   myApp.directive("example",function(){
    return {
      restrict:"E",
      scope:{
        name:"=",
      },
      link:function($scope,element,attrs){
        console.log($scope.name); ==> nameTest
      }
    }
   })
     
  //         
   controller：
   myApp.controller("test",function($scope){
     $scope.nameExample = "nameTest"
   })

설명:실제 생산 에서 이 바 인 딩 전략 은 매우 효과 적 입 니 다.예 를 들 어 제 가 명령 에서 대상 에 게 부모 급 역할 도 메 인 을 되 돌려 주 려 고 한다 고 가정 할 때'@'이'값 을 통 해 전달 하 는 방법 은 이미 수 요 를 만족 시 킬 수 없습니다.이때'='이'인용 전달'을 고려 해 야 합 니 다.name='namexample'이라는 성명 을 통 해하위 역할 필드 의$scope.name 을 부모 역할 필드 의$scope.nameemple 와 연결 하면 같은 주 소 를 가리 키 고 있 습 니 다.어느 것 을 수정 하 든 상대방 에 게 영향 을 줄 수 있 습 니 다.
sendmessage 를 사용 하여 하위 역할 영역 과 부모 역할 영역 을 연결 하 는 방법 으로 연결 합 니 다.

   directive:
   myApp.directive("example",function(){
    return {
      restrict:"E",
      scope:{
        sendMessage:"&",
      },
      link:function($scope,element,attrs){
      }
    }
   })

  //         
   controller：
   myApp.controller("test",function($scope){
     $scope.parentSendMessage = function(content){
        alert(content);
     }
   })

설명:"&"바 인 딩 은 하위 역할 도 메 인 에서 부모 역할 도 메 인 을 사용 할 수 있 도록 하 는 방법 입 니 다.그러면 부모 역할 도 메 인$scope.parent SendMessage()의 일부 데 이 터 를 이용 하여 연산 하고 결 과 를 하위 역할 도 메 인$scope.sendmessage()에 되 돌려 줍 니 다.
이 얕 은 견해 가 명령 격 리 역 의 3 가지 귀속 전략 을 이해 하 는 데 도움 이 되 기 를 바 랍 니 다!많은 응원 부 탁 드 리 겠 습 니 다.