AngularJS 지시문의 바인딩 전략 예제 분석-JS 튜토리얼-php.cn

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

高洛峰

풀어 주다： 2016-12-24 09:51:25

원래의

1055명이 탐색했습니다.

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

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

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

(1) @: 바인딩 문자열

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

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

1. 기본 방법

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

로그인 후 복사

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

로그인 후 복사

표시 효과:

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

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

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

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

로그인 후 복사

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

3.'='바인딩

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

예:


   ctrl:
   

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

로그인 후 복사

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

로그인 후 복사

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

효과는 다음과 같습니다.

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

3.'&'방법

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

로그인 후 복사

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

로그인 후 복사

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

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

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