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({ 
        .... 
       }) 
      } 
     } 
    }; 
});