Question

我是angularjs的新手，我遇到了一些麻烦。通常我会找到一种解决方法，但不是这次。

所以问题是我想使用md按钮作为另一个页面的链接。但是，当我添加一个href时，该按钮会从页面中消失。这是我的代码：

home.html的

    <body ng-app="friend-s-app">
    <div ng-controller="friendsappController">
        <md-toolbar>
            <div class="md-toolbar-tools">

        <md-button href="/home.html" >
            Home
        </md-button>

    </div>
</md-toolbar>
</div>

<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/hammerjs/hammer.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<script src="app.js"></script>

app.js，万一你想要它：

    (function(angular, undefined){
        "use strict";

        angular
            .module('friend-s-app', ['ngMaterial', 'ngMessages', 'ng'])
            .controller('friendsappController', inscriptionEditor)
            .controller('InscriptionSheet', InscriptionSheet);

function inscriptionEditor($scope, $mdDialog) {
    var alert;

    $scope.myPathVariable = 'path/to/somewhere';
    $scope.showInscription = showInscriptionSheet;
    $scope.showSignIn = showSignIn;
    function showInscriptionSheet($event) {
        $mdDialog.show({
            targetEvent: $event,
            template:
            '<md-dialog layout="column">' +
                '<md-content>' +
                    '<form style="padding: 20px;">' +
                        '<div layout="row">' +
                            '<md-input-container>' +
                                '<label>First name</label>' +
                                '<input ng-model="user.firstName" required/>' +
                                '<div ng-messages="userForm.firstName.$error" ng-show="userForm.firstName.$dirty">' +
                                    '<div ng-message="required">This is required!</div> '+
                                '</div>' +
                            '</md-input-container>' +
                            '<md-input-container>' +
                                '<label>Last name</label>' +
                                '<input ng-model="user.lastName" required/>' +
                                '<div ng-messages="userForm.lastName.$error" ng-show="userForm.lastName.$dirty">' +
                                    '<div ng-message="required">This is required!</div> '+
                                '</div>' +
                            '</md-input-container>'+
                        '</div>'+
                        '<md-input-container style="width: 50%">' +
                            '<label>Nickname</label>' +
                            '<input ng-model="user.nickname" required minlength="5" maxlength="15"/>' +
                        '</md-input-container>' +
                        '<div layout="row">' +
                            '<md-input-container>' +
                                '<label>Password</label>' +
                                '<input ng-model="user.password" type="password" required minlength="5" maxlength="15"/>' +
                            '</md-input-container>' +
                            '<md-input-container>' +
                                '<label>Repeat password</label>' +
                                '<input ng-model="user.repassword" type="password" required minlength="5" maxlength="15"/>' +
                            '</md-input-container>'+
                        '</div>'+
                        '<md-input-container>' +
                            '<label>E-mail</label>' +
                            '<input ng-model="user.email" required/>' +
                        '</md-input-container>'+
                        '<div layout="row">'+
                            '<md-button ng-Click="closeDialog()" style="width:50%">' +
                                'Cancel' +
                            '</md-button>' +
                            '<md-button style="width: 50%">' +
                                'Validate' +
                            '</md-button>' +
                        '</div>'+
                    '</form>'+
                '</md-content>'+
            '</md-dialog>',

            controller: 'InscriptionSheet',
            onComplete: afterShowAnimation,
            locals: { employee: $scope.userName }
        });


        function afterShowAnimation(scope, element, options) {
        }
    }
    function showSignIn($event) {
        $mdDialog.show({
            targetEvent: $event,
            template:
            '<md-dialog>' +
                '<md-content>' +
                '<md-input-container>' +
                    '<label>Nickname</label>' +
                    '<input ng-model="user.nickName" required/>' +
                    '<div ng-messages="userForm.nickName.$error" ng-show="userForm.nickName.$dirty">' +
                        '<div ng-message="required">This is required!</div>' +
                    '</div>' +
                '</md-input-container>' +
                '<md-input-container>' +
                    '<label>Password</label>' +
                    '<input ng-model="user.password" required type="password"/>' +
                    '<div ng-messages="userForm.password.$error" ng-show="userForm.password.$dirty">' +
                        '<div ng-message="required">This is required!</div> '+
                    '</div>' +
                '</md-input-container> ' +
                '<div layout="row">'+
                    "<md-button ng-Click=\"closeDialog()\" style=\"width: 50%\" >" +
                        'Cancel' +
                    '</md-button>' +
                    '<md-button style="width: 50%" href="home.html">' +
                        'Validate' +
                    '</md-button>' +
                '</div>'+
                '</md-content>' +
            '</md-dialog>',

            controller: 'InscriptionSheet',
            onComplete: afterShowAnimation,
            locals: { employee: $scope.userName }
        });

        function afterShowAnimation(scope, element, options) {
        }
    }
}

function InscriptionSheet($scope, $mdDialog, employee) {
    $scope.employee = employee;

    $scope.closeDialog = function() {
        $mdDialog.hide();
    };
}

    })(angular);

结果如下：没有href： http://i.stack.imgur.com/zKRKS.png

有了它： http://i.stack.imgur.com/M4JqC.png

谢谢你的帮助。

Answer 1

我刚刚遇到过类似的问题。请注意，当您从ng-click切换到ng-href时，它将注入锚标记而不是按钮。为了保持相同的视觉特性，我需要在我的CSS中将display: inline-block;应用于.md-button类（它被添加到上述锚标记中）。这可能是它消失在你身边的原因。

如果这有意义或需要进一步阐述，请告诉我。

添加href时，md按钮消失

1 个答案: