AngularJS와 : $ 먼저 + A 지시어는이 코드를 취 지침

Question

의 속성을 변경 :

<div ng-repeat="image in home_images | limitTo: 5 " imagesrc="img/links/{{image.file_name}}" imagelink="{{image.url}}" title="{{image.title}}" caption="{{image.caption}}" isbig="$first"></div> 

(NG-클래스 = "{큰는 : $ 먼저}"unexplicably 여기 실패).

해야하고이로 만들어 버린다는 :

.directive('imagelink', function(){ 
    return { 
     replace: true, 
     scope: { 
     imagesrc: '@', 
     imagelink: '@', 
     title: '@', 
     caption: '@', 
     isbig: '@' 
     }, 
     templateUrl: 'partials/image-link.html', 
     link: function(scope, element, attrs){ 
     element.bind('mouseenter', function(){ 
      element.addClass('show-caption'); 
     }); 
     element.bind('mouseleave', function(){ 
      element.removeClass('show-caption'); 
     }); 
     if (attrs.isbig) { 
      console.log(attrs); 
      attrs.imagesrc = attrs.imagesrc + "_bg.png"; 
     } else { 
      attrs.imagesrc = attrs.imagesrc + "_sm.png"; 
     } 
     } 
    }; 
    }); 

이 세 가지 문제가 있습니다 :

• attrs에 링크 기능으로 업데이트 할 것

  <a ng-href="{{imagelink}}" class="image-link"> 
      <div class="image" ng-class="{big: isbig === 'true'}"> 
       <div class="caption"><h6>{{title}}</h6><span>{{caption}}</span></div> 
       <img ng-src="{{imagesrc}}" alt="title"> 
      </div> 
  </a> 
  

  지시어입니다 지시문에서 업데이트가보기에 반영되지 않음

• 먼저 작동하지 않을 것 같다 $ (왜 나던 '겨 클래스 = "{큰 : $ 먼저}"어쨌든 작동?)

• isBig을 (내가 처음 $로이 문제를 해결 이동하는 데 사용) 목적을 무너 뜨리는 모든 반복에 대해 진실 또는 거짓 인 것으로 보인다. $ first가 지시어의 밖에서 호출되기 때문에 이것은 결코 일어나서는 안되며, 그러므로 지시어를 호출 할 때마다 갱신된다.

Answer 1

이러한 질문에 대해서는 jsfiddle 또는 plunkr을 제공해주십시오. 그것은 당신을 훨씬 쉽게 도와줍니다. 귀하의 문제는 실제로 템플릿이 HTML 코드에 삽입 된 후 ng-repeat가 발생하기 때문입니다. 따라서 이런 식으로 일할 수 없습니다. 이러한 변경 사항을 확인하십시오 범위에서

:

는

isbig: '=' 

지시어 범위에서 isbig 부모 범위 사이의 바인딩 양방향을 만듭니다. 이것은 ng-repeat가 템플릿 추출 후에 실행되기 때문에 필요합니다. 따라서 isbig를이 방법으로 묶어야합니다. 다음

그리고

은 바인드합니다 조작을 제거하고 대신 템플릿에 필요한 접미사를 추가 얻을 다음 NG 수준의 문제를 들어

<img ng-src="{{imagesrc}}{{ (isbig&&'_bg.png'||'_sm.png') }}" alt="title"> 

. 나는 그 문법으로 작업 할 수 없다.

<div class="image {{isbig&&'big'||''}}"> 

그래서 여기 겨-클래스를 사용하지 않는,하지만 반복과 물건을 처리하는 방법을 각의 나의 이해는 내가 어떤 단점이 있다는 점에서이없는 생각 :하지만이 작동하는 것 같다. 이것은 완벽하게 작동 http://jsfiddle.net/hssPn/3/