カスタムディレクティブのスコープモデルは定義されていません

Question

背景：私はcollection-repeat（Angularのng-repeatを超えるIonic改善）を使用して連絡先リストを表示するIonicアプリケーションを持っています。上部には、表示する連絡先のリストを決定するための2つの切り替えボタンがあります。連絡先の画像、タイトル、サブタイトルを表示するカスタムディレクティブを作成しました。

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関数を呼び出すと、ボタンをクリックするとピクチャが更新されないので、ディレクティブも機能しなくなります。

ここでは、plunker：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