从 JSON 文件 AngularJS 注入的编译指令

Posted 2023-03-05

【中文标题】从 JSON 文件 AngularJS 注入的编译指令

【英文标题】：Compile directive that is injected from a JSON file AngularJS

【发布时间】：2014-11-15 23:43:57

【问题描述】：

希望有人可以帮助我应对这一挑战。

我使用 $http.get() 从服务器请求 JSON 数据；

来自服务器的数据返回一个对象。对象中的一个值包含 html 标记。此标记使用<div ng-bind-html-unsafe="content" /> 注入到页面中

在标记中，有一个名为<poll />的自定义指令

使用标准的AngularJS指令结构，它不会拾取指令并链接它。

如何编译从服务器检索到的 HTML 并调用指令上的链接函数？

谢谢！

【参考方案1】：

The $compile service is what you want.

$compile 服务可以注入控制器或指令并在模板上调用。它将返回一个您可以调用的链接函数，并传入您要链接的范围。

这是一个例子：

angular.module('app', []);

angular.module('app').controller('MainCtrl', function ($compile, $rootScope) 
  var template = '<special-directive prop="myProp"> </special-directive>';
  var scope = $rootScope.$new();
  var top = document.getElementById('top');
  scope.myProp = 'Say hello to your mother for me';
  top.innerHTML = template;
  
  $compile(top)(scope);
)

angular.module('app').directive('specialDirective', function () 
	return 
      scope: prop: '=' ,
      restrict: 'E',
      link: function (scope, ele) 
        var html = 'Hello from the special directive<br/><br/>' + scope.prop;
        ele.html(html);
      
    
)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
  <div id="top"></div>
</div>

【讨论】：

我一直在研究 $compile 函数，但无法让它工作 :( 我目前正在使用 $scope.content = $compile($scope.tip.data.Node.body); 然后 ` 但模板中没有显示任何内容

请看上面的sn-p。