如何在指令的 html 模板中包含 pageURL答案

【问题标题】：How to include a pageURL in a html template of a directive如何在指令的 html 模板中包含 pageURL
【发布时间】：2015-09-05 04:18:47
【问题描述】：

我想在我的 angularjs 指令的 html 模板中包含一个扩展 pageUrl。这是我的一个最简单的例子。

angular.module('pageInclude', [])
    .directive('pageInclude', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                extUrl: '='
            },
            template: "<div><h1>Page Include</h1><ng-include src=\"'{{extUrl}}'\"></ng-include></div>"
        }
    });

我的 HTML 代码是：

<page-include ext-url="example/extendForm.html"></page-include>

然后我得到以下错误：

错误：[$interpolate:noconcat] 插值时出错：'{{extUrl}}' 严格的上下文转义不允许连接的插值需要可信值时的多个表达式。看 http://docs.angularjs.org/api/ng.$sce http://errors.angularjs.org/1.3.15/$interpolate/noconcat?p0='%7B%7BextUrl%7D%7D' 在 REGEX_STRING_REGEXP (angular.js:63) 在 $interpolate (angular.js:10152) 在 addAttrInterpolateDirective (angular.js:8101) 在 collectDirectives (angular.js:7203) 在 compileNodes (angular.js:7035)

有什么办法可以让这个案例奏效吗？感谢您的回复。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

进行以下更改

scope:{
  extUrl:'@'
}

把模板写成

template: "<div><h1>Page Include</h1><ng-include src=\"{{extUrl}}\"></ng-include></div>"

【讨论】：

【解决方案2】：

尝试改变

extUrl: '='

到

extUrl: '@'

或将 attr 值更改为

ext-url="'example/extendForm.html'"

example

【讨论】：

感谢您的回复。我已经尝试过这种方式，但它仍然不起作用。主要原因是
我在小提琴中添加示例
感谢 Tek 的示例。有用。我的错误是在 ng-include 的 src 属性中添加了 '。