动态加载的角度的javascript不起作用答案

【问题标题】：Dynamically loaded javascript of angular not working动态加载的角度的javascript不起作用
【发布时间】：2016-08-25 18:01:55
【问题描述】：

我正在构建一个应用程序，其中我的 DOM 在角度世界之外动态添加，即。 jQuery 以及用于动态加载的 javascript。我从 angular.injector 方法和范围中获得了 $compile，然后确实使用了 $compile 服务。但是有了这一切，我的指令和控制器无法运行。我看到它们已添加到我的应用程序中，但仍无法启动控制器。

index.html 是

<html>
<head>
  <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div ng-app="test">
    <div id="main">

    </div>
  </div>
  <!--<script src="https://googledrive.com/host/0ByYZbKdhSDoSeFNQVGdEd2k3amM/direc.js"></script>-->
</body>
</html>

script.js

//Create angular module
angular.module("test",[]);

$(document).ready(function(){
  //Load dynamically the JS
  $.getScript('https://googledrive.com/host/0ByYZbKdhSDoSeFNQVGdEd2k3amM/direc.js', function(){
   angular.element($("#main")[0]).scope().$root.$apply();
  });
  var scrip = "<script src=\"https://googledrive.com/host/0ByYZbKdhSDoSeFNQVGdEd2k3amM/direc.js\"></script>"
  var htmlStr = "<span test-drective=\"test-drective\">Test</span>";
  $("#main").append(angular.element('*[ng-app]').injector().get("$compile")(htmlStr)(angular.element($("#main")[0]).scope().$new(true)));
})

而 direc.js 是

angular.module("test")
.directive("testDrective", function(){
  return {
        restrict: 'A',
    controller: function($scope) {
            console.log("Controller")
        },
        link: function(scope, elem, attrs) {
            console.log("link")
        }
  };
})

如果我在 index.html 中添加 direc.js，一切正常，但不能使用 jquery 动态加载脚本或添加为 dom。

示例应用： https://plnkr.co/edit/gekifqGzJDAsWs5OF4ro

【问题讨论】：

标签： angularjs dynamic directive loaded

【解决方案1】：

在加载完成并且您的 DOM 准备就绪后，尝试在代码中引导您的 Angular 应用程序angular.bootstrap(document, ['myApp']);

参见bootstraping angular“手动初始化”部分

通常，您的 Angular 应用程序的所有 javascript 代码都必须存在于客户端。而且您不应该在指令之外操纵 DOM。也许这个ng-bind-html-compile directive 可以帮助您以更角度的方式解决您的问题

【讨论】：