Question

我正在构建一个应用程序，我的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

Answer 1

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

请参阅bootstraping angular部分＆＃34;手动初始化＆＃34;

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

动态加载javascript角度无法正常工作

1 个答案: