ng-click event not works for link in angular js

Question

Hi in my angular application, I am using routeProvider for routing partials, and in one page i have a set of links i am using ng-href for providing link. and I have a ng-click event for the link. but when I click on the link the page goes to the otherWise section of routeProvider and loads the page I have defined there.

see the code

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",
                ]
    }
];


} ]);

what is the error ? how can I solve this

How would you be able to if the function is not attached to scope.? $scope.showDetails = ... — PSL
– PSL, Commented Feb 2, 2015 at 3:59
@PSL I have tried attaching function with scope var, but it is not still working — droidev
– droidev, Commented Feb 2, 2015 at 4:00
@PSL not working means when I click on the link it is going to the home_page.aspx instead of calling thshowDetails() method — droidev
– droidev, Commented Feb 2, 2015 at 4:03

rakhmanoff · Accepted Answer · 2015-02-02 03:49:06Z

1

Your controller should contains your function as an field of the $scope, so it looks like this:

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

Also I think you shouldn't use ng-href, because click overrides your href

answered Feb 2, 2015 at 3:49

rakhmanoff

3691 gold badge3 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

droidev Over a year ago

tried this method by removing ng-href but still the same

awfius · Accepted Answer · 2015-02-02 04:08:33Z

1

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

loose the ng-href, if you want the link to activate after the click event.

<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;
}

answered Feb 2, 2015 at 4:08

awfius

112 bronze badges

1 Comment

droidev Over a year ago

this is working, means the alert is showing , but after that it goes to the home page again, I have passed event , and prevented Default action , but still the same

Collectives™ on Stack Overflow

ng-click event not works for link in angular js

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related