Mdb-ui-kit: 在 AngularjS 中使用 $.material.init() 的正确方法

你有没有试过在 material.js 之前包含到达.js？

嗯.. 我不知道你说的使用到达.js 是什么意思，我没有在你的任何例子中看到它，我也不知道那个脚本是做什么的。

这是我的脚本列表

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular-cookies.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="js/vendor/angular_tinymce.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script data-require="[email protected]" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.5/js/ripples.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.1.5/js/material.min.js"></script>
<script src="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.js"></script>
<script src="js/main.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers/main_controller.js"></script>
<script src="js/controllers/authentication_controller.js"></script>
<script src="js/controllers/account_controller.js"></script>
<script src="js/controllers/map_controller.js"></script>
<script src="js/controllers/new_user_controller.js"></script>
<script src="js/controllers/pages_controller.js"></script>
<script src="js/controllers/new_page_controller.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>

我试过以许多不同的顺序重新排列它们，但似乎没有什么能解决我的问题:(

我将在 material.js 之前搜索到达.js 并包含它，看看会发生什么。

感谢您提供这个很棒的库和快速响应！ :)

这实际上解决了问题！ 谢谢！！ :)

别客气 ：）

嗨，FezVrasta，

首先我想说的是，这部作品展现了伟大的才华:)

我正在尝试在 AngularJS 应用程序中使用您的库。
添加到达.js 使您的一些烟花得到显示，但它似乎对其他组件的性能产生了巨大影响。
单击按钮的动画现在非常滞后。

这是熟悉的东西还是我做错了什么？

再次感谢这颗宝石！

看起来像到达.js 让事情滞后很多。

您可以使用$.material.something("CSS selector");手动初始化新元素（这是建议的方式）

感谢您及时的回复。

执行 $.material.input() （在输入的情况下）会破坏 Angular.js 数据绑定。
我找到了这个，但我找不到将它集成到代码中的正确方法。

此主题不使用 Web 组件

你的意思是？ 你能详细说明一下吗？

谢谢！

@chenop你有没有找到一些方法来在 angular 中使用它？

将 Arrive.js 与 PR #365 一起使用。 这是最简单的方法。

它不再有性能问题并且运行良好。

我在 Angular 应用程序中运行 $.material.init() 时遇到问题。 收到以下错误：

TypeError: Cannot read property 'init' of undefined

我已经合并了来自 PR#365 的补丁并包含了到达.js，这是我尝试初始化插件的方式（通过我的 ng 模板中的 ng-init 标签）：

 // initializes the material design ripples 
  this.scope_.initMaterial = function() {
     angular.element.material.init();
  };

有任何想法吗？

这对我也不起作用。 你能分享一个正确做的例子吗？

到达.js 为我工作谢谢

// app.js
angular.module('starterApp', ['ngRoute','users'])

.config(function($routeProvider){
    // works with arrive js
    $.material.init();
})

<!-- Material Design for Bootstrap -->
  <script src="lib/arrive/js/arrive.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/js/material.min.js"></script>


  <script src="./app.js"></script>
  <script src="./src/users/UserController.js"></script>

如果您尝试将此项目与 AngularJS 一起使用，请尝试http://tilwinjoy.github.io/angular-bootstrap-material/

嗨，我已经阅读了这里的所有评论，并且我已经尝试包括到达.js 来修复它，但我不起作用。
是从这个仓库https://github.com/uzairfaooq/arrive下载的reach.js，当我谷歌到达.js 时，它是第一个。

@christopher-ustb 你读过你上面的评论吗？ 或许可以试试...