AngularJS 지시어 바인딩

지시어 내부에서 ng-show를 토글하기 위해 부모 범위의 변수에 영향을 주려고했습니다. 이 지시문은 ng-repeat 지시문을 포함하는 사용자 정의 지시문입니다. 일단 ng-repeat가 끝나면 그 안의 div와 div 요소를 숨기고 싶습니다.AngularJS 지시어 바인딩

여기 내 상황을 보여주는 Plunkr입니다 : http://beta.plnkr.co/edit/C42Z25?p=preview 또한 여기에 같은 문제를 사용 JSFiddle의 비교,하지만 그것이 NG 반복이 아니다 그래서 작동 : http://jsfiddle.net/dyzPC/

그래서 몇 가지 문제가있다. 내 지시문 내에서 scope.$parent.showMe = true을 사용하여 부모 범위의 showMe을 변경해야합니다. scope.showMe = true을 사용하여 설정할 수 없습니다. 분리 된 범위, 범위, 실제 범위로 시도했지만 아무 것도 작동하지 않습니다.

또한 jquery 콜백 함수에서 부모 범위 showMe를 scope.$parent.showMe = false으로 재설정 할 수 없습니다. 이렇게하면 콘텐츠가있을 때 포함 된 div를 표시하지 못하며 콘텐츠가 없을 때 숨길 수 없습니다.

마지막으로 한 가지 문제는 $last의 사용입니다. plunkr 예제에서는 $ last를 사용할 수 있지만 실제 코드에서는 ng-repeat 콜렉션이 HTTP 응답 인터셉터에서 채워집니다. 모든 요소가 $last = true으로 끝나기 때문에 $ last를 사용할 수 없게되는 것 같습니다. ng-repeat가 완료되었을 때를 탐지하는 다른 방법이 있습니까? 당신의 지시에

출처

2013-03-20 CMCDragonkai

나는 부모 값을 설정할 수 있습니다. 나는 지시어에서 같은 문제 설정 값을 가졌다. http://stackoverflow.com/questions/16494457/how-to-set-an-interpolated-value-in-angluar-directive – Anton

, 당신은 scope.$apply()에 scope.$parent.showMe = false;을 포장해야합니다 당신은 너무 각도가 scope.showMe을 모르는 각도 (당신의 jQuery 기능) 외부의 각도 속성 값을 변경하기 때문에

scope.$parent.showMe = true; //this one works 
element.hide().fadeIn('fast').delay(2000).fadeOut('slow', function(){ 
    scope.$apply(function(){ 
     scope.$parent.showMe = false; 
    }); 
});

이것은 변경되었습니다.

지시문이 ngRepeat과 동일한 태그에 있으면 ng-repeat="httpMessage in messages"의 바인드가 제거되므로 분리 범위를 사용할 수 없습니다. 즉, 여기서 범위를 분리하면 httpMessages이 존재하지 않습니다.

출처

2013-05-14 22:10:05 GFoley83

hide/show 로직과 ng-repeat를 directive로 이동 한 다음 컨트롤러가 directive의 속성을 통해 directive에 메시지 목록을 제공하게합니다.

app.directive("hideShow", function() { 
return { 
    restrict: 'E', 
    template: 
    "<div ng:repeat='message in messages'>" + 
    " <em>{{message.message}}</em> " + 
    "</div>", 
    scope: { 
     messages: "=" 
    }, 
    link: function(scope, element, attrs) { 
     element.hide(); 
     scope.$watch("messages", function() { 
      element.fadeIn('fast').delay(1000).fadeOut('slow');    
     }); 
    } 
}; 
});

여기는 working Fiddle입니다.

출처

2013-05-15 03:45:49

AngularJS 지시어 바인딩

답변

관련 문제