Событие ng-click не работает для ссылки в угловом js

Question

Привет, в моем угловом приложении, я использую routeProvider для партитуры маршрутизации, и на одной странице у меня есть набор ссылок, которыми я использую ng-href для предоставления ссылки. и у меня есть событие ng-click для ссылки. но когда я нажимаю на ссылку, страница переходит в раздел otherWise routeProvider и загружает указанную мной страницу.

увидеть код

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

Вашего контроллер должны содержать вашу функцию в качестве поля $scope, так это выглядит следующим образом:

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

Кроме того, я думаю, вы не должны использовать ng-href, потому что щелчок отменяет свой href

Answer 2

$scope.showDetails = function() { 
    enter code here 
} 

освободите ng-href, если вы хотите, чтобы ссылка активировалась после события click.

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

$scope.showDetails = function(item) { 

    alert(); 
    window.location.href = "#' + item.header; 
}