Question

我一直在尝试加载文件而不是内联html。

var app = angular.module('myApp', []);

app.directive('contentItem', function ($compile) {
    var imageTemplate = '<div class="entry-photo"><h2>&nbsp;</h2><div class="entry-img"><span><a href="{{rootDirectory}}{{content.data}}"><img ng-src="{{rootDirectory}}{{content.data}}" alt="entry photo"></a></span></div><div class="entry-text"><div class="entry-title">{{content.title}}</div><div class="entry-copy">{{content.description}}</div></div></div>';
    var videoTemplate = '<div class="entry-video"><h2>&nbsp;</h2><div class="entry-vid"><iframe ng-src="{{content.data}}" width="280" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div><div class="entry-text"><div class="entry-title">{{content.title}}</div><div class="entry-copy">{{content.description}}</div></div></div>';
    var noteTemplate = '<div class="entry-note"><h2>&nbsp;</h2><div class="entry-text"><div class="entry-title">{{content.title}}</div><div class="entry-copy">{{content.data}}</div></div></div>';

    var getTemplate = function(contentType) {
        var template = '';

        switch(contentType) {
            case 'image':
                template = imageTemplate;
                break;
            case 'video':
                template = videoTemplate;
                break;
            case 'notes':
                template = noteTemplate;
                break;
        }

        return template;
    }

    var linker = function(scope, element, attrs) {
        /* scope.rootDirectory = 'images/'; */

        element.html(getTemplate(scope.content.content_type))/* removed ".show()" */;

        $compile(element.contents())(scope);
    }

    return {
        restrict: "E",
        replace: true,
        link: linker,
        scope: {
            content:'='
        }
    };
});

function ContentCtrl($scope, $http) {
    "use strict";

    $scope.url = 'content.json';
    $scope.content = [];

    $scope.fetchContent = function() {
        $http.get($scope.url).then(function(result){
            $scope.content = result.data;
        });
    }

    $scope.fetchContent();
}

我想知道如何从网址加载模板 - 加载image.html 我试图将模板替换为templateUrl - 遗憾的是没有做太多。

你能否告诉我如何做到这一点

Answer 1

首先，您可以使用ng-view设置模板URL

这是一个工作示例plunc

app.directive('contentItem', function ($compile,$parse) {

    templates = {
      image: 'image.html',
      video: 'video.html',
      notes: 'note.html'

    }

    var linker = function(scope, element, attrs) {
        scope.setUrl = function(){
          return templates[scope.content];
        }

    }

    return {
        restrict: "E",
        replace: true,
        link: linker,
        scope: {
          content: '='
        },
        template: '<div ng-include="setUrl()"></div>'
    };
});

Answer 2

在你的代码中声明一个指令，但你不使用它的任何模板选项。您需要重构代码以使用templateUrl选项使用指令模板。

directive('directiveName', function(){
    // Runs during compile
    return {
        // name: '',
        // priority: 1,
        // terminal: true,
        // scope: {}, // {} = isolate, true = child, false/undefined = no change
        // controller: function($scope, $node, $attrs, $transclude) {},
        // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
        // restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
        // template: '',
        // templateUrl: '', //you need it
        // replace: true,
        // transclude: true,
        // compile: function(tElement, tAttrs, function transclude(function(scope){ return function linking(scope, $node, attrs){}})),
        link: function($scope, iElm, iAttrs, controller) {

        }
    };
});

如果您仍想模拟模板行为，则应使用 $ http服务从服务器获取模板html并加载它。*

在这种情况下，您应该创建一个单独的服务或工厂，并注入$ http并将响应模板存储在变量中，以便多次调用服务器。但我认为重新编码指令功能是一个坏主意。

angular templateUrl替换模板

2 个答案: