Can't access any route inside my template directive

Question

I have this directive, where I'm trying to get some news via HTTP GET method, based on some options

import publicListTpl from './public-list.html';

(() => {
    angular
        .module('news.crud.directives', [])
        .directive('newsPortalPublishedList', () => ({
            restrict: 'E',
            replace: true,
            templateUrl: publicListTpl,
            scope: {
                type: '@'
            },
            controller: ($scope, $http, FlashMessages) => {
                $http.get('/api/portal/'+$scope.type)
                    .then(response => $scope.news = response.data)
                    .catch(() => FlashMessages.add(FlashMessages.ERROR, 'La récupération des '+$scope.type+' a échoué.'));
            }
        })); })();

The problem that when I add the scope option scope: {type: '@'}, I cant access to any defined route into my publicListTpl template, for example url('news_edit', {id: news.id}) will return null.

This is my html template:

<div class="portlet" ng-repeat="news in newsList">
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                {{ news.title }}
                <small>{{ news.subtitle }}</small>
            </div>
            <div class="actions">
                <a class="btn btn-info btn-sm" href="{{ url('news_edit', {id: news.id}) }}">
                    <i class="fa fa-pencil"></i> Editer
                </a>
            </div>
        </div>
        <div class="portlet-body">
            <img ng-if="news.image" src="{{ news.image }}" class="pull-left" height="100"/>
            <div ng-bind-html="news.shortContent"></div>
        </div>
    </div>
</div>

Ps: I don't even know the source problem, so you can edit the question to make it more clear.

as I understand you want to create directive to do http calls depending on options you want to to set in the HTML, am I right? — Peter Wilson, Jun 18 '18 at 14:18
that doesn't look right: `ng-repeat="news in news._embedded.items"`, you are overriding the array with an inner element (array?) — Aleksey Solovey, Jun 18 '18 at 14:20
Yes, that's it, could you propose me some solution to test them — famas23, Jun 18 '18 at 14:20
That's good the API returning data like that, and I'm getting my data right, everything works good, just `{{url('news_edit')}}` not working ...it return blank — famas23, Jun 18 '18 at 14:21
`{{ }}` takes angularjs expressions, it thinks `url` is `$scope.url = function(...){...}` in your controller. Additionally you might need `ng-href` instead — Aleksey Solovey, Jun 18 '18 at 14:28

score 1 · Accepted Answer · answered Jun 18 '18 at 14:28

I did some changes to your directive, I used link function instead of controller and I replaced news in ng-repeat with item because it's not a good choice to name the single items with name of the array your are looping through.

import publicListTpl from './public-list.html';
    
    (() => {
        angular
            .module('news.crud.directives', [])
            .directive('newsPortalPublishedList', ($http, FlashMessages) => ({
                restrict: 'E',
                replace: true,
                templateUrl: publicListTpl,
                scope: {
                    type: '@'
                },
                link: (scope) => {
                    $http.get('/api/portal/'+scope.type)
                        .then(response => scope.news = response.data)
                        .catch(() => FlashMessages.add(FlashMessages.ERROR, 'La récupération des '+scope.type+' a échoué.'));
                }
            })); })();

<div class="portlet" ng-repeat="item in news._embedded.items">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    {{ item.title }}
                    <small>{{ item.subtitle }}</small>
                </div>
                <div class="actions">
                    <a class="btn btn-info btn-sm" href="{{ url('news_edit', {id: item.id}) }}">
                        <i class="fa fa-pencil"></i> Editer
                    </a>
                </div>
            </div>
            <div class="portlet-body">
                <img ng-if="news.image" src="{{ item.image }}" class="pull-left" height="100"/>
                <div ng-bind-html="news.shortContent"></div>
            </div>
        </div>
    </div>

the using of the directive should be :

<news-portal-published-list type="url_goes_here"></news-portal-published-list>

Hey, Thank you for you answer with some few modify, it works great, just can explain to me the difference between `controller:` and `link:` — famas23, Jun 21 '18 at 11:04
you can read about the differences between them here https://stackoverflow.com/questions/15676614/link-vs-compile-vs-controller but simply `link` used to bind data between directive scope and the controller of the view that called the directive, `controller` used on directive-to-directive communication — Peter Wilson, Jun 21 '18 at 11:25

Can't access any route inside my template directive

1 Answers1