md 按钮的类型

确保链接 Angular 和 Angular Material 库!

index.html

<html ng-app="mdButtonApp">
    <head>
        <!-- Import Angular -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
        <!-- Angular Material -->
        <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.5.8/angular-material.min.js"></script>
        <link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css" rel="stylesheet">
        <script src="app.js"></script>
    </head>
    <body>
        <md-content ng-controller="mdButtonController">
            <!-- Normal `md-button` -->
            <md-button>Normal</md-button>
            <md-button class="md-primary">{{text}}</md-button>
            <md-button class="md-accent">{{text}}</md-button>
            <md-button class="md-warn" ng-href="{{link}}">Google</md-button>
            <md-button class="md-raised" ng-click="goToLink('http://example.com')">Link</md-button>
            <md-button class="md-cornered md-primary md-hue-1">{{text}}</md-button>
            <md-button class="md-accent md-hue-2">Some Button</md-button>
            <md-button class="md-warn md-hue-3" ng-href="{{link}}">{{text}}</md-button>
        </md-content>
    </body>
</html>

app.js

angular.module('mdButtonApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
.controller('mdButtonController', function($scope) {
$scope.text = "Button";
$scope.link = "https://google.com";
$scope.goToLink = function(link) {
        // Go to some site
        console.log('Redirecting to:' + link);
        window.location.href=link;
    }
})