将渲染的字符串传递给 Angular 指令答案

【问题标题】：Pass rendered string into Angular directive将渲染的字符串传递给 Angular 指令
【发布时间】：2017-03-30 17:43:13
【问题描述】：

我正在尝试制作一个角度指令，该指令根据放置在指令上的属性呈现动态内容 url。示例：

指令：

angular
    .module('myModule')
    .directive('myContent', directive);

function directive() {
    return {
        replace: true,
        templateUrl: function (elem, attrs) {
            return attrs.contentUrl;
        }
    };
}

HTML：

<div my-content content-url="url/to/my-content.html"></div>

但是，我希望 content-url 属性由来自控制器的字符串填充。因此，假设控制器使用名称为“home”的“controllerAs”语法，我希望 html 读取：

<div my-content content-url="{{home.myContent.url}}"></div>

但是，在指令的 templateUrl 函数中，contentUrl 属性按字面意思作为“{{home.myContent.url}}”发送。在运行 templateUrl 函数之前，我怎样才能得到这个值来评估？或者，有没有更好的方法可以从指令中获得简单的动态内容？

【问题讨论】：

应该可以通过将scope: { conentUrl: '=' } 添加到您的指令函数中，并在您的 html 中使用它时省略大括号。然后你需要 $watch 指令中 $scope.contentUrl 的值。或者，您也应该能够在指令的链接功能中使用 $attr.$observe，尽管我对此没有太多经验。 Google 是你的朋友 :-)
听起来您正在尝试使用 ng-include 重新创建 Angular 已经在本地完成的功能。除非您出于学习目的而尝试重新创建它，否则我只会使用 ng-include。否则，查看源代码以了解他们是如何做到的可能不是一个坏主意。

标签： angularjs templates dynamic angularjs-directive attributes

【解决方案1】：

答案由@crhistian-ramirez 提供：

只需使用 ng-include

<div ng-include="vm.myContent.url"></div>

【讨论】：