javascript - ng-click事件不适用于angular js中的链接

Question

嗨，在我的 Angular 应用程序中，我正在使用 routeProvider 来路由部分，在一个页面中，我有一组链接，我正在使用 ng-href 提供链接。我有一个链接的 ng-click 事件。但是当我点击链接时，页面会转到 routeProvider 的 otherWise 部分并加载我在那里定义的页面。

看代码

HTML

           <li ng-repeat="item in supplyItem">
                <a class="span" ng-click="showDetails()" ng-href="#{{item.header}}">
                    {{item.header}}
                </a>
            </li>

App.js

var myApp = angular.module("myApp",[
    'ngRoute',
    'appController'
    ]);

myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
    when('/home',{
        templateUrl : 'partials/home_page.aspx',
        controller:'HomePageController',
    }).
    when('/supplies',{
        templateUrl : 'partials/supplies.aspx',
        controller:'SupplyController',
    }).
    otherwise({
        redirectTo: '/home'
    });


}]);

controller.js

appController.controller('SupplyController', ['$scope', function ($scope) {
    $scope.firstITem = "Acrylics";
    $scope.showDetails = function() {
        alert("clicked");

    }


 $scope.supplyItem = [
    {
        "header": "Acrylics",
        "Acrylics": [
                "Custom Tray Material",
                "Reline Materials",
                "Reline Materials-Hard",
                "Reline Materials-Soft",
                "Repair Acrylics",
                "Resin & Pattern Materials",
                "Temporary Crown and Bridge Material",
                "Tissue Conditioner",
                ]
    }
];


} ]);

错误是什么？我该如何解决这个问题

Answer 1

你的 Controller 应该包含你的函数作为 $scope 的一个字段，所以它看起来像这样:

$scope.firstITem = "Acrylics";
$scope.showDetails = function(e) {
    e.preventDefault();
    alert("clicked");
}

此外，我认为您不应该使用 ng-href，因为点击会覆盖您的 href