Question

我是角色的新手，我试图在js文件中定义模块，我觉得有角度正在处理我的dom，其中var app = angular.module("myApp", []);将在在Shell或其中一个模块中的后期阶段。

我尝试使用常规脚本标记但是有错误，我假设如果我的dom准备好后再注入它，然后我在Shell内实例化模块。请指导。

的Javascript

document.addEventListener("DOMContentLoaded", function(event) {
     inject();
     new Shell();
});

function inject() {
    var ng = document.createElement('script');
    ng.src = "js/api/angular.js";
    var scripts = document.getElementsByTagName('script')[0]; 
    scripts.parentNode.insertBefore(ng, scripts);
}

在Shell内部

var app = angular.module("myApp", []);
        app.controller("MyController", function($scope) {
            $scope.author = {
                "name": "My name",
                "title": "Developer",
                "company": "my company"
            }
        });

我的HTML是

 <div id="result" ng-app="myApp">
        <div ng-controller="MyController">
            <h1>{{author.name}}</h1>
            <p>{{author.title + ", " + author.company}}</p>
        </div>
    </div>

在我允许我定义模块之前，我应该如何解决角度等待的问题。

Answer 1

问题是angular也会监听DOMContentLoaded，一旦它被触发，它会查找名为myApp的模块，因为你在ng-app="myApp"指令中指定了它。如果你想改变这种行为，你应该bootstrap自我约束。在您的情况下，您需要从ng-app="myApp"中删除div，并在定义模块并定义所有服务，指令，控制器和其他相关模块后，将angular.bootstrap(..., ['myApp']);添加到Shell()构造函数中这些东西，因为在模块被引导之后你将无法再这样做了。

<强> HTML

<div id="result" ng-cloak> 
    ...
</div>

<强>贝壳

var app = angular.module("myApp", []);
    app.controller("MyController", function($scope) {
      ...
    });

// <= Define here all module related stuff

angular.bootstrap(document.getElementById('result'), ['myApp']);

angular js执行顺序

1 个答案: