사용자 지정 지시문의 범위 모델이 정의되지 않았습니다.

Question

배경 : 연락처 목록을 collection-repeat (Angular의 ng-repeat 이상의 이오니아 개선)을 사용하여 표시하는 이안 응용 프로그램이 있습니다. 맨 위에 표시 할 연락처 목록을 결정하기위한 두 개의 토글 버튼이 있습니다. 연락처의 그림, 제목 및 부제목을 표시하는 사용자 지정 문을 작성했습니다.

HTML

<ion-content> 
    <ion-list> 
     <div class="item item-avatar" collection-repeat="contact in viewing" force-refresh-images="true"> 
     <profile-or-initials ng-model="contact"></profile-or-initials> 
     <h2>{{contact.title}}</h2> 
     <p>{{contact.subtitle}}</p> 
     </div> 
    </ion-list> 
    </ion-content> 

JS

var app = angular.module('myApp', ['ionic']); 
app.directive('profileOrInitials', function($state) { 
    return { 
     restrict: "E", 
     scope: { 
     ngModel: '=' 
     }, 
     replace: true, 
     template: '<div class="profileOrInitials"></div>', 
     link: function(scope, element) { 
     var getInitials = function(user) { 
      return user.title.substring(0, 2); 

     }; 
     var process = function() { 
      var image = scope.ngModel.feed_pic_url; 
      var initials = getInitials(scope.ngModel); 
      var html = ''; 

      if (image) { 
      html = '<img src="' + image + '"></img>'; 
      } else { 
      image = "http://science-all.com/images/wallpapers/blue-image/blue-image-14.jpg"; 
      html = '<img src="' + image + '"></img><div class="initials">' + initials + '</div>'; 
      } 

      element.html(html); 
     }; 
     //var destroy = scope.$watch('ngModel', function() { 
     // if (scope.ngModel) { 
      process(); 
      //destroy(); 
      //} 
     //}); 
     } 
    }; 
    }) 

문제 : 나는 그것을 위해 scope.$watch 기능을 추가하지 않는 한이 지침의 ngModel 범위는 undefined입니다. 심지어 시계에서 destroy 함수를 호출하면 단추를 클릭하면 그림이 업데이트되지 않기 때문에 지시문도 작동하지 않습니다.

여기에서 플 런커 : http://plnkr.co/edit/t4opQdqr4VStpqP6MdQn.

누구에게 설명 할 수 있습니까? 나는 실제 해결책에 관심이 없다. 나는 무슨 일이 일어나고 있는지 이해하지 못한다. 내 의구심은 내 지시문의 link 함수가 collection-repeat 전에 실행 중이므로 그 시점에서 모델이 정의되지 않았지만 우선 순위를 낮추려고 시도했지만 여전히 작동하지 않습니다. (collection-repeat has a priority of 1000).

Answer 1

기본적으로 이것은 collection-repeat의 작동 방식 때문입니다. 렌더링 전에 컬렉션의 자리 표시자를 만듭니다. ng-repeat을 사용하면 제대로 작동하는 것을 볼 수 있습니다. collection-repeat을 사용하기위한 치료/솔루션으로

, 다음 사용을 고려 수 있습니다 모델이 4 번째 인수로 link 함수에 전달됩니다 있도록 내가 require: 'ngModel'을 사용했다

.directive('profileOrInitials', function($state) { 
    return { 
     restrict: "E", 
     require: 'ngModel', 
     replace: true, 
     template: '<div class="profileOrInitials"></div>', 
     link: function(scope, element, attrs, model) { 
     var getInitials = function(user) { 
      return user.title.substring(0, 2); 
     }; 
     model.$render = function() { 
      m = model.$viewValue; 
      var image = m.feed_pic_url; 
      var initials = getInitials(m); 
      var html = ''; 

      if (image) { 
      html = '<img src="' + image + '"></img>'; 
      } else { 
      image = "http://science-all.com/images/wallpapers/blue-image/blue-image-14.jpg"; 
      html = '<img src="' + image + '"></img><div class="initials">' + initials + '</div>'; 
      } 

      element.html(html); 
     } 
     } 
    }; 
}); 

알 수 있습니다. 명시 적으로 범위를 선언 할 필요가 없습니다.

마지막으로 model.$render이 모델을 처음 설정할 때 자동으로 호출됩니다. 즉, 예제의 맨 위에있는 단추를 클릭하면됩니다.

는 모델의 값은 model.$viewValue