AngularJS 지시문의 바인딩 전략 예제 분석

이 문서의 예에서는 AngularJS 지시문의 바인딩 전략을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

이전 기사에서 명령어가 어떻게 독립적인 범위를 생성하는지 알았습니다. 이 섹션에서는 바인딩 전략을 자세히 살펴보겠습니다. 범위.

일반적으로 범위 바인딩 전략은 세 가지 유형으로 구분됩니다.

(1) @: 바인딩 문자열

(2) =: 상위 컨트롤러 사용 양방향 바인딩

(3)&: 상위 범위의 함수를 호출하는 데 사용됩니다.

1. 기본 방법

<test word="{{wordCtrl}}"></test>

app.controller('myController1',['$scope',function($scope){
    $scope.wordCtrl="hello";
}]);
app.directive('test',function(){
    return{
     restrict:'E',
     template:"<div>{{word}}</div>",
     link:function(scope,ele,attr){
      scope.word=attr.word;
     }
    }
});

표시 효과:

이것은 범위 내에서 문자열 바인딩을 구현하는 가장 기본적인 방법입니다.

2 실제로 위의 방법을 구현하려면

app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      word:'@'
     },
     template:"<div>{{word}}</div>",
    }
});

링크 함수를 삭제하고 @bind를 추가하면 명령어의 속성과 명령어 범위 사이의 문자열 바인딩이 성공적으로 이루어질 수 있습니다.

3.'='바인딩

=바인딩을 사용하면 명령어 범위 내에서 값을 변경할 수 있을 뿐만 아니라 상위 컨트롤러에서도 값을 변경해 두 가지를 달성할 수 있다. -웨이 바인딩.

예:

   ctrl:
   

<test word="{{wordCtrl}}"></test>

app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      word:'@'
     },
     template:"directive:<input ng-model=&#39;word&#39; />",
    }
});

효과는 명령 값은 컨트롤러의 해당 변수 값도 변경하여 컨트롤러와 명령어 범위 간의 양방향 바인딩을 실현합니다.

효과는 다음과 같습니다.

3.'&'방법

<test greet="sayHello()"></test>

app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      greet:'&'
     },
     template:"<div ng-click=&#39;sayHello({name:&#39;yuxiaoliang&#39;})&#39;>点击说HELLO</div>",
    }
});

매개변수 전달 방식에 주의하세요.

이 기사가 AngularJS 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

AngularJS 명령어의 바인딩 전략 예제 분석에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!