与RequireJS，手动初始化AngularJS，指令失败 [英] AngularJS with RequireJS, manual initialisation, directive fails
问题描述
在下面的例子中，为什么AngularJS编译{{'世界'}}在我的HTML而不是根据指令行事？
HTML
＆LT;身体GT;
＆LT; DIV＆GT;您好{{'世界'}}＆LT;！/ DIV＆GT;
＆lt;实施例＆GT;应更换＆下; /示例＆gt;
＆LT;脚本数据主要=LIB /主SRC =// cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.min.js\"></script>
＆LT; /身体GT;
main.js
require.config（{
路径：{
jQuery的：//$c$c.jquery.com/jquery-1.10.0.min'，
角：//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min
}，
垫片：{
'角'：{'出口'：'角'}
}，
优先： [
角
]
}）;需要（[
jQuery的，
'角'，
应用程序
]函数（$，角，应用程序）{
使用严格的;
$（文件）。就绪（函数（）{
angular.bootstrap（文件，[]）;
app.directive（示例，函数（）{
返回{
限制：E，
模板：＆LT; DIV＆GT;替换成了＆LT; / DIV＆gt;中
}
}）
}）;
}）;
app.js
定义（[
角
]，功能（角）{
使用严格的;
返回angular.module（'对myApp'，[]）;
}）;
在浏览器窗口中可见运行时
世界，你好！
应更换
所以角已初始化为{{'世界'}}汇编了世界，但例如'指令未能为应更换'还没有被替换为替换
我认识到没有应用持有者在HTML，但如果我尝试添加一个我得到一个错误
例如
＆LT; DIV NG-应用='对myApp'＆GT;
＆LT; DIV＆GT;您好{{'世界'}}＆LT;！/ DIV＆GT;
＆lt;实施例＆GT;应更换＆下; /示例＆gt;
＆LT; / DIV＆GT;
给出误差
未捕获的错误：没有模块：对myApp的http：// ...
由于你迟到/延迟加载的所有模块（使用AMD）则需要手动引导您的应用程序加载完成后。看看 http://docs.angularjs.org/guide/bootstrap对于这样的一个例子。
确认引导不叫，直到棱角分明的文件已准备就绪。还包括你想在这一点上，作为引导呼叫的模块依赖自举应用程序（例如： angular.bootstrap（文件，['的myapp']）; ）。
In the following example why does AngularJS compile {{'world'}} in my HTML but not act upon the directive?
HTML
<body>
<div>Hello {{'World'}}!</div>
<example>should be replaced</example>
<script data-main="lib/main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.min.js"></script>
</body>
main.js
require.config({
paths: {
jquery: '//code.jquery.com/jquery-1.10.0.min',
angular: '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min'
},
shim: {
'angular' : {'exports' : 'angular'}
},
priority: [
"angular"
]
});
require( [
'jquery',
'angular',
'app'
], function($, angular, app) {
'use strict';
$(document).ready(function () {
angular.bootstrap(document,[]);
app.directive('example',function(){
return {
restrict: "E",
template:"<div>Replaced</div>"
}
})
});
});
app.js
define([
'angular'
], function (angular) {
'use strict';
return angular.module('myApp', []);
});
Visible in browser window when run
Hello World!
should be replaced
So Angular has initialised as {{'World'}} has compiled to World but the 'example' directive has failed as 'should be replaced' hasn't been replaced with 'Replaced'
I realise there is no app holder in the HTML but if I try to add one I get an error
For example
<div ng-app='myApp'>
<div>Hello {{'World'}}!</div>
<example>should be replaced</example>
</div>
Gives error
Uncaught Error: No module: myApp http:// ...
Because you're late/lazy loading all of the modules (using AMD) you need to manually bootstrap your application after the load is complete. Take a look at the manual initialization section of http://docs.angularjs.org/guide/bootstrap for an example of doing this.
Make sure the bootstrap is not called until angular document is ready. Also include the app you want bootstrapped at that point as a module dependency for the bootstrap call (e.g. angular.bootstrap(document, ['myapp']);).
这篇关于与RequireJS，手动初始化AngularJS，指令失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
