AngularJS 사용자 정의 Directive 및 controller 상호 작용
때때로 사용자 정의 디렉터리에서 컨트롤러를 호출하는 방법이 필요합니다. 즉, 디렉터리와 컨트롤러는 일정한 결합도를 가지고 있습니다.예를 들어 다음과 같은 컨트롤러가 있습니다.
app.controller('MyCtrl',function($scope){
$scope.load = function(){
console.log('loading more...')
}
});현재 Direcitve를 사용자 정의합니다. MyCtrl이라는 컨트롤러의load 방법을 사용해야 합니다.
app.directive('enter', function(){
return function($scope, ele, attrs){
ele.bind('mouseenter', function(){
$scope.load();
})
}
})페이지는 다음과 같이 호출됩니다.
<div ng-controller="MyCtrl">
<div enter>enter to load more</div>
</div>MyCtrl에서 다른 방법을 사용하려면?이 때direcitve의 인코딩을 변경해야 합니다.이를 통해 알 수 있듯이directive에서 하드 인코딩을 하는 방법은controller를 호출하는 방법이 불합리하다는 것을 알 수 있다.그러면 변화의 가능성을 페이지에 올리면 어떨까요?enter에 속성 값을 줍니다. 이 속성 값은 어떤 방법을 사용하는지 표시합니다.
<div ng-controller="MyCtrl">
<div enter="load()">enter to load more</div>
</div>
이렇게 하면directive에서 하드코딩하는 것보다 유연하다.directive는 다음과 같이 변경됩니다.
app.directive('enter', function(){
return function($scope, ele, attrs){
ele.bind('mouseenter', function(){
$scope.$apply('load()');
})
}
})그러나 상하문의 $apply 방법을 호출할 때 입력된 실삼도 문자열이기 때문에 위의 쓰기가 가장 합리적이지 않습니다.링크 함수에 형참attrs가 있다는 것을 잊지 마세요. 이것을 통해 임의의 속성 값을 얻을 수 있습니다.
app.directive('enter', function(){
return function($scope, ele, attrs){
ele.bind('mouseenter', function(){
$scope.$apply(attrs.enter);
})
}
})이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
