이 문서의 예에서는 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='word' />", } });
효과는 명령 값은 컨트롤러의 해당 변수 값도 변경하여 컨트롤러와 명령어 범위 간의 양방향 바인딩을 실현합니다.
효과는 다음과 같습니다.
3.'&'방법
<test greet="sayHello()"></test>
app.directive('test',function(){ return{ restrict:'E', scope:{ greet:'&' }, template:"<div ng-click='sayHello({name:'yuxiaoliang'})'>点击说HELLO</div>", } });
매개변수 전달 방식에 주의하세요.
이 기사가 AngularJS 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.
AngularJS 명령어의 바인딩 전략 예제 분석에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!