Angular ng-repeat directive access data from controller

Question

I am really new to directives in Angular previously what I am doing I would achieve with some form of ng-include and passing variables around in dirty ways.

I am very confused on the scope of directives and what they're capable of, also I am aware that once a directive is used inside of ng-repeat the variables behave differently.

To understand what I am looking for you need the whole picture. I have these emails stored in a database. Each email has typical properties, I wrote a directive to display each one using 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');

        }
    };
});

The directive in HTML

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

HTML Template

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

I now am facing a problem where I want to use Angular's UI bootstrap.modal directive. I want to be able to click something within my template and it will bring up the modal with the data from this scope.

First of all, I need to make the values I pass into it, for example email="something@live.com" be data-bound to some object residing in my controller. I don't understand how to achieve this because, removing the link function and changing the scope to have "=email" makes nothing work.

Can someone help me write a directive that accepts values like date, email, content, isRead, and subject. These values are provided by ng-repeat, and lastly the values in this directive must bind back to the controller so that changing them per-say in a modal will update them in the directive too.

See [Explain `replace=true` in Angular Directives (Deprecated)](http://stackoverflow.com/questions/22497706/explain-replace-true-in-angular-directives-deprecated/35519198#35519198). — georgeawg, Mar 09 '17 at 22:28

score 0 · Accepted Answer · answered Mar 09 '17 at 20:49

Your directive is created correctly, you must change a few lines. As you are using isolated scope, it's not necessary to assign each property to the scope.

View

<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>

Controller

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

This is an excellent answer for a few reasons. Firstly, you did an amazing job of providing comments in my code or explanation. Secondly you provided the begins of my next step which is showing the ui-modal which I haven't even gotten into yet. — Bailey Miller, Mar 13 '17 at 16:25
Also you answered a question I was going to have to Google eventually anyway, the isNew class was something I was having a problem with. — Bailey Miller, Mar 13 '17 at 16:29

Angular ng-repeat directive access data from controller

1 Answers1