我将 material-bootstrap 脚本包含在我的 Angular 项目的 index.html 中,但它们需要手动重新包含在 View 中才能工作。
这很奇怪,因为对于插入到 Angular 中的所有其他脚本来说,这不会发生。
index.html
<script src="bower_components/bootstrap-material-design/scripts/material.js"></script>
<script src="bower_components/bootstrap-material-design/scripts/ripples.js"></script>
我还注意到 material-bootstrap 不能很好地与 Grunt 和 Bower 配合使用,并且往往会在构建时自行删除(因此手册包含在页面底部)。
这些是 Material-boostrap 和 Angular/Bower/Grunt 的已知错误还是我做错了什么?
如果您还需要什么,请告诉我!
编辑:
bower.json 中的依赖
"dependencies": {
"angular": "~1.3.0",
"json3": "~3.3.1",
"es5-shim": "~3.1.0",
"bootstrap": "~3.2.0",
"angular-resource": "~1.3.0",
"angular-cookies": "~1.3.0",
"angular-sanitize": "~1.3.0",
"angular-animate": "~1.3.0",
"angular-touch": "~1.3.0",
"angular-route": "~1.3.0",
"bootstrap-material-design": "*",
"jsjws": "~3.0.2",
"angular-ui-router": "0.2.11"
}
最佳答案
问题是用于 Bootstrap 的 Material 设计插件通过将转换应用到 DOM 来工作,并且它不是设计为自动与 Angular 这样的框架一起工作。
material framework 要求你声明如下脚本来初始化组件:
<script>
$.material.init();
</script>
这意味着对象在页面加载时被“实体化”。由于 Angular.js 应用程序是单页的,因此样式仅应用于页面中已存在的元素(尝试添加新组件,也不使用 View :您应该得到相同的结果)。
如果您在 View 页面中包含脚本,您将获得所需的行为(未完全正常运行),因为 Angular.js 在后台加载 View 页面,就像它是一个普通页面一样,然后获取 dom 的内容和将 View 树与单页树合并。
我建议您尝试在加载 View 后添加对 $.material.init() 的调用。 由于涟漪库,多次调用 init 会出现问题,请小心。如此处所述(https://github.com/FezVrasta/bootstrap-material-design/issues/184),您应该避免涟漪再次附加事件处理程序:
// add the "done" boolean inside ripples.js
window.ripples = {
init: function(withRipple) { /*bla bla*/ },
done: false
}
// Then, where you run ripples.init... (aka, material.js, or maybe directly inside the init function of ripples.js)
if (!window.ripples.done) {
ripples.init();
ripples.done = true;
}
关于javascript - Bootstrap Material 设计无法在动态 Angular View 中正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26206344/