引导材料设计无法在动态角度视图下正常工作 [英] Bootstrap material design not working properly with dynamic angular views

问题描述

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

I'm including material-bootstrap scripts into the index.html of my Angular project, but they need to be manually re-included in the views to work.

这很奇怪，因为插入Angular的所有其他脚本都不会发生.

This is strange, as for all other scripts inserted into Angular this does not happen.

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>

我还注意到material-bootstrap在Grunt和Bower上不能很好地发挥作用，并且倾向于在构建时自行删除(因此手册位于页面底部).

I also noticed that material-bootstrap doesn't play well with Grunt and Bower, and tends to remove itself on build (hence the manual includes at the bottom of the page).

这些是Material-boostrap和Angular/Bower/Grunt的已知错误，还是我做错了什么?

Are these known bugs with Material-boostrap and Angular/Bower/Grunt or have I been doing something wrong?

如果您还有其他要求，请告诉我！

If you require anything else please let me know!

修改:

bower.json中的依赖项

dependencies in 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"
  }

推荐答案

问题是，用于引导程序的材料设计插件通过将转换应用于DOM来工作，并且它不能与Angular之类的框架一起自动工作.

The problem is that the material design plugin for bootstrap works by applying transformations to the DOM and it is not designed to work automatically with frameworks like Angular.

材料框架要求您声明一个类似于以下内容的脚本来初始化组件:

The material framework requires you to declare a script like the following to initialize components:

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

这意味着在页面加载时对象已物化".由于Angular.js应用程序是单页的，因此样式仅应用于页面中已经存在的元素(尝试添加新组件，也不要使用视图:应该获得相同的结果).

This means that object are "material-ized" at page loading. Since an Angular.js application is single-paged, the style is applied only to elements already present in the page (try to add new component, also without using views: you should get the same result).

如果将脚本包含在视图页面中，则会获得所需的行为(未完全正常运行)，因为Angular.js在后台将视图页面作为正常页面加载，然后获取dom和将视图树与单页树合并.

You get the required behaviour (not fully functional) if you include the scripts in the views pages because Angular.js, under the hood, loads the view page as it was a normal page, then takes the contents of the dom and merge the view tree with the single-page tree.

我建议您尝试在加载视图后尝试添加对$ .material.init()的调用. 由于涟漪库，多次调用init会出现问题，因此请务必小心.如此处所述( https://github.com/FezVrasta/bootstrap-material-design/issues/184 )，则应避免产生波纹以再次附加事件处理程序:

I suggest you trying to add a call to $.material.init() after loading the view. Be careful as there are issues with calling the init multiple times, because of the ripples library. As stated here (https://github.com/FezVrasta/bootstrap-material-design/issues/184) you should avoid ripples to attach the event handlers again:

// 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;
}

这篇关于引导材料设计无法在动态角度视图下正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！