Question

我之前对Angular中的指令非常陌生，我以某种形式的ng-include和以脏方式传递变量来实现我正在做的事情。

我对指令的范围和它们的能力感到非常困惑，我也知道，一旦在ng-repeat中使用了一个指令，变量的行为就会有所不同。

要了解我在寻找什么，你需要全面了解。我将这些电子邮件存储在数据库中。每封电子邮件都有典型的属性，我写了一个使用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>

我现在面临一个问题，我想使用Angular的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({ .... }) } } }; });

Angular ng-repeat指令从控制器访问数据

1 个答案: