问题是，用于引导程序的材料设计插件通过将转换应用于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;
}