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

Compile directive that is injected from a JSON file AngularJS

本文关键字：编译 指令 注入 AngularJS JSON 文件      更新时间：2023-09-26

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

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

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

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

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

一旦从服务器检索到这个HTML，我如何编译它并调用指令上的链接函数？

谢谢！

$compile服务就是您想要的。

$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>

相关文章：