Question

创建自定义指令时，如果要将视图/模板html放在单独的文件中，Angular似乎从公共URL加载模板，为它发出HTTP请求。

如何将此模板HTML inline包含在一个单独的文件中？

Answer 1

使用ES6没有什么是不可能的：

import yourTemplate from 'path/to/file';

// inject $templateProvider in start point of your application

$templateProvider.put('path/to/file', yourTemplate);

$templateProvider本身就是一个简单的$cacheFactory实例，您可以在其中放置任何可以在ng-include中使用的html或者只是在您的指令中使用的html，如下所示： / p>

//Directive
import yourTemplate from 'path/to/file';

在指令配置中使用：

...,
controller: xxx,
template: yourTemplate,
link: () => { ... }
...

Answer 2

使用指令来解决此问题

<强> HTML

<div custom-include url="{{url}}"></div>

<强>指令

app.directive('customInclude', ['$http', '$compile', '$timeout', customInclude]);
    function customInclude($http, $compile, $timeout) {
        return {
            restrict: 'A',
            link: function link($scope, elem, attrs) {
                //if url is not empty
                if (attrs.url) {
                    $http({ method: 'GET', url: attrs.url, cache: true }).then(function (result) {
                        elem.append($compile(angular.element(result.data))($scope));
                        //after sometime we add width and height of modal
                        $timeout(function () {
                            //write your own code
                        }, 1, false);
                    });
                }
            }
        };
    }

Answer 3

＆＃34;直列＆＃34;在一个单独的文件中是矛盾的。

由于angular是客户端代码，因此加载存储在其自己的单独文件中的模板将始终需要http请求。

避免这些请求的唯一方法是将它们与其他代码一起内联添加，因此不要在单独的文件中添加。

你如何需要角度模板html？

3 个答案: