Angular ng-repeat指令從控制器訪問數據

Question

我對Angular中的指令非常陌生，以前我在做什麼，我會用某種形式的ng-include來實現，並以骯髒的方式傳遞變量。

我對指令的範圍和它們的能力非常困惑，我也知道一旦在ng中使用一個指令 - 重複這些變量的行爲會有所不同。

要了解我在找什麼，需要整張照片。我將這些電子郵件存儲在數據庫中。每封電子郵件都有典型的屬性，我寫了一個指令來顯示每一個使用ng-repeat。

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'); 

     } 
    }; 
}); 

該指令在HTML

<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」）數據綁定到駐留在控制器中的某個對象。我不明白如何實現這一點，因爲刪除鏈接功能並將範圍更改爲「= email」無效。

有人可以幫我寫一個指令，接受像日期，電子郵件，內容，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({ 
        .... 
       }) 
      } 
     } 
    }; 
});