이 HTML이 있습니다.
<button ng-click="reset()">
<div ng-controller="anotherController" class="container">
<directive data="{{ datafordirective }}"></directive>
</div>
지령:
app.directive('directive', function(){
return {
restrict: 'AE',
scope:{ data: '=', someAction: '=', reset: '='},
link: function(scope, element, attrs){
scope.reset = function(){
//reset dataset
};
}
};
});
내 지시문 내부에 데이터를 재설정하는 링크 함수의 함수가 있지만 문제는이 버튼 과이 지시문을 사용하는 뷰가 다른 컨트롤러를 가지고 있지만 지시문 과이 뷰 컨트롤러가 동일한 app.module ( ' appname ', []) ...
이것을 달성하는 방법이 있습니까? 지시문 범위 밖에서 scope.reset () 함수를 사용하려면?
감사!
이를 수행 할 수있는 여러 가지 방법이 있습니다. 몇 가지 예를 들어 보겠습니다.
1. 쉽고 비 이상적인 방법
지시문 내에서 상위 범위에 액세스하십시오.
대신에:
scope.reset = function() {};
사용하다:
scope.$parent.reset = function() {};
그러나 자식 범위 내에서 부모 범위를 수정하는 것은 좋은 방법이 아닙니다. 범위 상속이 작동하는 방식에 대해 혼동을 일으킬 수 있습니다 ( AngularJS에서 범위 프로토 타입 / 프로토 타입 상속의 뉘앙스는 무엇입니까? ). 또한 IMO는 훌륭한 캡슐화가 아닙니다.
2. (약간) 더 나은 방법
<button ng-click="buttonClicked = true">
<div ng-controller="anotherController" class="container">
<directive data="{{ datafordirective }}" reset="buttonClicked" reset-callback="buttonClicked = false"></directive>
</div>
여기서는 부모 범위 ( buttonClicked)의 속성을 사용하여 요소의 속성을 통해 지시문을 제어합니다.
app.directive('directive', function(){
return {
restrict: 'AE',
scope:{ data: '=', resetCallback: '&', reset: '='},
link: function(scope, element, attrs){
scope.$watch('reset', function(val) {
if (val) {
// reset dataset
scope.resetCallback();
}
});
}
};
지시문은의 값을 buttonClicked에 바인딩 한 reset다음 해당 값이 변경되는지 감시하고 변경되면 데이터 세트를 재설정합니다.
3. 또 다른 더 나은 방법
데이터 세트에서 작업을 처리 할 서비스를 만듭니다.
app.service('dataset', function() {
this.reset = function() {
// reset dataset
};
});
그런 다음 부모 컨트롤러 어딘가에 dataset서비스 를 삽입하고 호출 할 함수를 만들어야합니다 dataset.reset.
$scope.reset = function() {
dataset.reset();
};
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다