代码之家 › 专栏 › 技术社区 › famas23

无法访问模板指令中的任何路由

angularjs

famas23 · 技术社区 · 6 年前

我有这个指令,我试图通过http get方法获取一些新闻,基于一些选项

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Ã©.'));
            }
        })); })();

当我添加 scope 选项 scope: {type: '@'} ,我无法访问任何已定义的进入我的 publicListTpl 模板,例如 url('news_edit', {id: news.id}) 将返回 null .

这是我的HTML模板:

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

注:我甚至不知道问题的来源,所以你可以编辑问题,使之更清楚。

1 回复 | 直到 6 年前

Peter Wilson 6 年前

我对你的指令做了一些修改,我用链接函数代替了控制器 news 在里面 ng-repeat 具有 item 因为用正在循环的数组的名称命名单个项不是一个好的选择。

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>

指令的使用应为:

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