Question

我一直在寻找一段时间，似乎找不到这个问题的正确答案，我希望你们都能提供帮助。

我要做的是将URL通过JSON传递给我的angular指令，这样我就可以在屏幕上的模板中显示内容/代码。

我正在尝试创建一个指令备忘单，其设计与Bootstrap的文档页面类似：http://getbootstrap.com/components/#btn-dropdowns

我尝试使用ng-bind-html，但只显示我传入的网址。

我的问题是，我可以通过JSON将模板URL传递给指令，并将该文件的内容/代码显示在屏幕上吗？或者我是否需要将所有代码复制到JSON文件中直接将代码的字符串表示形式传递给指令？

修改

以下是我正在构建的JSON文件示例：

{"id":"number-picker",
  "title":"Number Picker",
  "description":"An input box used to communicate a numeric value from the client to the server",
  "code":"/js/directives/templates/number-picker.html"}

这是我正在建立的指令的一部分：

<h2>{{directive.title}}</h2>
<div class="row">
    <div class="col-md-2">
        <span class="bold">Description:</span>
    </div>
    <div class="col-md-10">
        <span ng-bind-html="directive.description"></span></p>
    </div>
</div>
<p><span class="bold">Code:</span>
    <div class="code">
        <div ng-bind-html="directive.code"></div>
    </div>
</p>

Answer 1

经过一系列的反复试验，非常感谢所有评论的人，我想出了一个解决方案。

这是js代码：

myApp.directive('directiveDetail', function($http){ return { restrict: 'E', templateUrl: 'js/directives/templates/directive-template.html', link: function(scope, element, attrs) { if (scope.directive.code) { $http.get(scope.directive.code).then(function (response) { scope.displaycode = response.data; }); } } } });

我需要访问scope参数才能访问URL数据。我还需要添加if语句，因为如果我没有传入有效的URL，那么显示的文本就是DOM的整个代码。

在页面上查看Angular模板的内容

1 个答案: