ng-click doesn't work on anchor element

StackOverflow https://stackoverflow.com/questions/23647504

سؤال

Q1: I tried to use nav in bootstrap to make a navigation bar and bound ng-click to the anchors. However after I click the anchor link,there is nothing happened.

Q2: I've noticed that the anchor link clicked won't be active by setting bg-color to it? How can this be implemented?

Here is the JSfiddle...

<div ng-controller="SuiteSectionCtrl">
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">All Suites</a>
    </li>
    <li><a ng-click="handleClick">Suite1</a>
    </li>
    <li><a href="#">Suite2</a>
    </li>
    <li><a href="#">Suite3</a>
    </li>
</ul>

هل كانت مفيدة؟

المحلول 2

Answering Q2:

Maybe there are smarter solutions, but this one works as well:

angular.module('myApp').controller('MenuCtrl', ['$scope', '$location', '$rootScope',
    function ($scope, $location, $rootScope) {
        $rootScope.$on('$locationChangeSuccess', function () {
            var path = $location.path();
            // you may apply logic on the path (group together in case of dropdown-menu e.g.)
            $scope.topMenu = path;
        });
    }
]);

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"
     ng-controller="MenuCtrl">
    <div class="container-fluid">
        <div class="navbar-header">
            <!-- ... -->
        </div>

        <div class="navbar-collapse collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li ng-class="{active: topMenu == '/'}">
                    <a href="#">Home</a></li>
                <li ng-class="{active: topMenu == '/about'}">
                    <a href="#about">About</a></li>
                <!-- more... -->
            </ul>
        </div>
    </div>
</div>

نصائح أخرى

The brackets for function invocation are missing. You should have:

ng-click="handleClick()"

I have Updated your code. Add ng-app directive to your body tag. And In your html change ng-click="handleClick" to ng-click="handleClick()"

<body ng-app="app"><div ng-controller="SuiteSectionCtrl">
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">All Suites</a>
        </li>
        <li><a ng-click="handleClick()">Suite1</a>
        </li>
        <li><a href="#">Suite2</a>
        </li>
        <li><a href="#">Suite3</a>
        </li>
    </ul>
    </div></body>

and our JS code is

var executionAPP = angular.module('app',[])//register your app 
executionAPP.controller('SuiteSectionCtrl',['$scope',function($scope){

    $scope.oneAtATime = true;

    $scope.testSuites = [{title:"TestSuite1",content:"TestContent1"},
                         {title:"TestSuite2",content:"TestContent2"},
                         {title:"TestSuite3",content:"TestContent3"},
                         {title:"TestSuite4",content:"TestContent4"},
                         {title:"TestSuite5",content:"TestContent5"}];
    $scope.handleClick = function(){
        alert('Accordion clicked');
    };

}]);

Updated Fiddle...

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top