角度 md 按钮不起作用答案

【问题标题】：Angular md-button not functioning角度 md 按钮不起作用
【发布时间】：2015-12-10 22:59:46
【问题描述】：

我正在尝试使用有角度的材料，但 md-button 似乎没有正确渲染，而 md-card 等其他项目却是

我使用 node 和 express 并使用 Mean.js 提供的 yo 生成器形成了大部分应用程序结构。当我使用 chrome 的调试检查页面时，所有这些资产实际上都是加载的。

任何帮助确定为什么 md-button 不起作用（仅加载按钮的文本）将不胜感激。

//These are my assets I'm including
module.exports = {
  app: {
    title: 'Icon',
    description: 'Collection of networks',
    keywords: 'Node.js, Express, AngularJS, MongoDB, Data, Networks, Research'
  },
  port: process.env.PORT || 3000,
  templateEngine: 'swig',
  sessionSecret: 'MEAN',
  sessionCollection: 'sessions',
  assets: {
    lib: {
      css: [
        'public/lib/bootstrap/dist/css/bootstrap.css',
        'public/lib/bootstrap/dist/css/bootstrap-theme.css',
        'public/lib/angular-material/angular-material.min.css'
      ],
      js: [
        'public/lib/angular/angular.js',
        'public/lib/angular-resource/angular-resource.js',
        'public/lib/angular-cookies/angular-cookies.js',
        'public/lib/angular-animate/angular-animate.js',
        'public/lib/angular-touch/angular-touch.js',
        'public/lib/angular-sanitize/angular-sanitize.js',
        'public/lib/angular-ui-router/release/angular-ui-router.js',
        'public/lib/angular-ui-utils/ui-utils.js',
        'public/lib/angular-material/angular-material.min.js'
      ]
    },
    css: [
      'public/modules/**/css/*.css'
    ],
    js: [
      'public/config.js',
      'public/application.js',
      'public/modules/*/*.js',
      'public/modules/*/*[!tests]*/*.js'
    ],
    tests: [
      'public/lib/angular-mocks/angular-mocks.js',
      'public/modules/*/tests/*.js'
    ]
  }
};

This is the content that isn't rendering correctly

<div class="container" data-ng-controller="HeaderController">

  <md-toolbar layout="row" layout-align="space-around center">
    <h2 class="md-toolbar-tools md-default-theme">
            <a href="#!/">Icon</a>
        </h2>


    <div data-ng-repeat="item in menu.items | orderBy: 'position'" data-ng-if="item.shouldRender(authentication.user);" ui-route="{{item.uiRoute}}">
      <md-button class="menu-button md-default-theme" href="{{item.uiRoute}}">{{item.title}}</md-button>
    </div>
    <md-button class="menu-button md-default-theme" data-ng-hide="authentication.user" href="#!/signup" ng-class="{active: $uiRoute}">SIGN UP</md-button>
    <md-button class="menu-button md-default-theme" data-ng-hide="authentication.user" href="#!/signin" ng-class="{active: $uiRoute}">SIGN IN</md-button>

  </md-toolbar>

</div>

【问题讨论】：

假设您的模块具有 ngMaterial 依赖项并且材料设计的 CSS 加载正确，请尝试从按钮中删除类，看看会发生什么。通过控制台看一下按钮的CSS，看看有没有材料可以找到。

标签： angularjs node.js express material-design

【解决方案1】：

可能是因为“class”和“ng-class”。覆盖。

试试这个：<md-button class="menu-button md-raised">SIGN IN</md-button>

还有这个：<md-button class="menu-button md-raised" ng-class="{active: $uiRoute}">SIGN IN</md-button>

【讨论】：