Bootstrap材料设计在动态角度视图下无法正常工作

Question

我将材质引导脚本包含在我的Angular项目的index.html中,但是需要手动将它们重新包含在视图中才能工作.

这很奇怪,因为插入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>

我还注意到材料引导程序与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"
  }

Answer 1

问题在于 bootstrap 的材料设计插件通过对 DOM 应用转换来工作，并且它并不是设计用于自动与 Angular 等框架一起工作。

Material 框架要求您声明如下脚本来初始化组件：

<script>
  $.material.init();
</script>

这意味着对象在页面加载时被“具体化”。由于 Angular.js 应用程序是单页的，因此样式仅应用于页面中已存在的元素（尝试添加新组件，也不使用视图：您应该得到相同的结果）。

如果将脚本包含在视图页面中，您将获得所需的行为（不完全功能），因为 Angular.js 在幕后会像普通页面一样加载视图页面，然后获取 dom 的内容并合并视图树与单页树。

我建议您尝试在加载视图后添加对 $.material.init() 的调用。请小心，因为由于 Ripples 库的原因，多次调用 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;
}