Angular ng-repeat指令はコントローラからのデータにアクセスします

Question

Angularの指令には本当に新しく、以前は何らかの形式のng-includeで実現していました。

ディレクティブの範囲とその可能性について非常に混乱しています。また、ng-repeatの中でディレクティブが使用されると、変数の動作が異なります。

私が探していることを理解するには、画像全体が必要です。私はこれらの電子メールをデータベースに保存しています。それぞれの電子メールには典型的なプロパティがあり、ng-repeatを使用してそれぞれを表示するディレクティブを作成しました。

HTML

で

app.directive('emailListing', function ($filter) { 
    return { 
     restrict: 'AE', 
     replace: 'true', 
     templateUrl: '../Pages/Views/Templates/emailListing.html', 
     scope: { 
      Date: "@", 
      Email: "@", 
      Content: "@", 
      Read: "@", 
      Subject: "@" 
     }, 
     link: function (scope, elem, attrs) { 
      scope.Date = attrs.date; 
      scope.Email = attrs.email; 
      scope.Content = attrs.content; 
      scope.Subject = attrs.subject; 
      if (attrs.isnew == 'true') { 
       scope.Read = "logo-unread"; 
      } else { 
       scope.Read = "logo-read"; 
      } 

      scope.Date = $filter('date')(scope.Date, 'MM-dd-yyyy'); 

     } 
    }; 
}); 

ディレクティブ

<email-Listing ng-repeat="items in AllEmails | filter:{message: contentEmail} | limitTo:10" email="something@live.com"></email-Listing> 

HTMLテンプレート

<div class="news-row row"> 
<label>{{email}}</label> 
</div> 

私は今、私は角のUI bootstrap.modalディレクティブを使用したい問題に直面しています。私はテンプレート内の何かをクリックできるようにしたい、そして、それはこのスコープからのデータでモーダルを持ち出すでしょう。

まず、値を渡す必要があります。たとえば、email = "something@live.com"はコントローラにあるオブジェクトにデータバインドされます。私はこれを達成する方法を理解していない、リンク機能を削除し、 "=電子メール"を持っている範囲を変更することは何も働かないので。

誰かが、日付、電子メール、コンテンツ、isRead、および件名などの値を受け入れる指示を書くのに役立つことができます。これらの値はng-repeatによって提供され、最後にこの指令の値はコントローラーにバインドされていなければなりません。

Answer 1

ディレクティブが正しく作成されているため、数行を変更する必要があります。分離スコープを使用しているので、各プロパティをスコープに割り当てる必要はありません。

ビュー

<email-Listing ng-repeat="item in AllEmails | filter:{message: contentEmail} | limitTo:10" email="{{item.email}}" date="{{item.date}}" content="{{item.content}}" read="{{ item.is_new ? 'logo-unread' : 'logo-read' }}" subject="{{item.subject}}"></email-Listing> 

コントローラ

app.directive('emailListing', function ($filter) { 
    return { 
     restrict: 'AE', 
     replace: 'true', 
     templateUrl: '../Pages/Views/Templates/emailListing.html', 
     scope: { 
      Date: "@", 
      Email: "@", 
      Content: "@", 
      Read: "@", 
      Subject: "@" 
     }, 
     link: function (scope, elem, attrs) { 
      /** 
      * These assignations are not necesary, you are using isolate scope 
      * which bind your properties to the directive's scope 
      */ 
      // scope.Date = attrs.date; 
      // scope.Email = attrs.email; 
      // scope.Content = attrs.content; 
      // scope.Subject = attrs.subject; 
      // if (attrs.isnew == 'true') { 
      //  scope.Read = "logo-unread"; 
      // } else { 
      //  scope.Read = "logo-read"; 
      // } 
      scope.Date = $filter('date')(scope.Date, 'MM-dd-yyyy'); 
     }, 
     controller: function ($scope, $uibModal) { 
      $scope.openModal = openModal; 

      // Here you can access to your email 
      // $scope.date, $scope.email, ... 

      function openModal() { 
       $uiModal.open({ 
        .... 
       }) 
      } 
     } 
    }; 
});