自举材料设计不适合动态角度视图

Question

我正在将材料引导脚本包含到我的index.html项目中，但它们需要手动重新包含在视图中才能工作。

这很奇怪，因为插入到角的所有其他脚本都不会发生这种情况。

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，并且倾向于在构建时自行删除(因此手册包含在页面底部)。

这些已知的错误有物质引导和棱角/鲍尔/格伦特，还是我做错了什么？

如果你还需要什么，请告诉我！

编辑

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

问题是，用于引导的材料设计插件是通过将转换应用到DOM来工作的，而且它的设计并不是要自动地与诸如角这样的框架一起工作。

材料框架要求您声明一个脚本，如下所示来初始化组件：

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

这意味着对象在页面加载时是“物质化”的。由于Angular.js应用程序是单页的，所以样式只应用于页面中已经存在的元素(尝试添加新组件，也不使用视图:您应该得到相同的结果)。

如果在视图页中包含脚本，则会得到所需的行为(不完全功能)，因为Angular.js在视图页下加载视图页，将其作为普通页面加载，然后获取dom的内容，并将视图树与单页树合并。

我建议您在加载视图后尝试添加对$.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;
}