Angular ng-click with call to a controller function not working

Question

I need to pass a variable to another controller. I have the following code which is related to the ListCtrl :

<a href="#items" data-router="article" ng-click="changeListName('metro')">

The link is going to another controller, ItemCtrl.

I want to pass a variable to the ItemCtrl. I thought of using a service called SharedProperties :

service('sharedProperties', function () {
    var list_name = '';

    return {
        getListName: function() {
            return list_name;
        },
        setListName: function(name) {
            list_name = name;
        }
    };
});

When the link is clicked, I call an angular click event to trigger the following function :

$scope.changeListName = function(name) {
    sharedProperties.setListName(name);
};

However, the ng-click does not seem to change the value of my shared property...

UPDATE

I put an alert inside the function triggered by ng-click and the alert is triggered, as it should be.

However, when I write my function like this :

$scope.changeListName = function(name) {
    sharedProperties.setListName(name);
};

It doesn't work... it looks like 'sharedProperties.setListName(name);' is not executed...

If I put it outside the function with a dummy name (eg. metro), it works..

UPDATE 3

I tried multiple things and I am pretty confident that the problem is with this function :

$scope.changeListName = function(list_name) {
    sharedProperties.setListName(list_name);
};

Do you have any idea why this is happening?

lucuma · Accepted Answer · 2013-07-05T15:13:25.490

105

You should probably use the ngHref directive along with the ngClick:

 <a ng-href='#here' ng-click='go()' >click me</a>

Here is an example: http://plnkr.co/edit/FSH0tP0YBFeGwjIhKBSx?p=preview

<body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    {{msg}}
    <a ng-href='#here' ng-click='go()' >click me</a>
    <div style='height:1000px'>

      <a id='here'></a>

    </div>
     <h1>here</h1>
  </body>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.go = function() {

    $scope.msg = 'clicked';
  }
});

I don't know if this will work with the library you are using but it will at least let you link and use the ngClick function.

** Update **

Here is a demo of the set and get working fine with a service.

http://plnkr.co/edit/FSH0tP0YBFeGwjIhKBSx?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, sharedProperties) {
  $scope.name = 'World';

  $scope.go = function(item) {
    sharedProperties.setListName(item);


  }

  $scope.getItem = function() {

    $scope.msg = sharedProperties.getListName();
  }
});

app.service('sharedProperties', function () {
    var list_name = '';

    return {

        getListName: function() {
            return list_name;
        },
        setListName: function(name) {
            list_name = name;
        }
    };


});

* Edit *

Please review https://github.com/centralway/lungo-angular-bridge which talks about how to use lungo and angular. Also note that if your page is completely reloading when browsing to another link, you will need to persist your shared properties into localstorage and/or a cookie.

edited Jul 05 '13 at 15:13

answered Jul 03 '13 at 20:44

lucuma

18,247
4
66
91

It looks like with both `ng-ref` and `href`, `ng-click` is triggered and fires my function. I updated my answer to better reflect my problem. – Justin D. Jul 03 '13 at 21:13
Are you asking a separate question now? – lucuma Jul 03 '13 at 21:17
I modified my plunker with your service and it works fine. I suspect you have some other issue going on. You'll see the text of the Get form service link update with the value from the service. – lucuma Jul 03 '13 at 21:29
I see it works fine in jsfiddle. Do you have any idea why it would not work in my app? – Justin D. Jul 03 '13 at 23:12
I found the source of the error. It comes from my second controller. the sharedProperties.getListName() method return an empty string, although the first controller did set the string to 'metro' in my example. I reproduced the behaviour here http://plnkr.co/edit/FSH0tP0YBFeGwjIhKBSx?p=preview – Justin D. Jul 04 '13 at 02:37
Wrong link in the previous post. This is the good one : http://plnkr.co/edit/dvAtg9d1ZG4AP4ZjJCcY – Justin D. Jul 04 '13 at 03:05
I don't understand your specific issue. Are you opening index.html, calling setListName and then browsing to home.hmtml? – lucuma Jul 04 '13 at 12:47
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/32897/discussion-between-lucuma-and-justin-d) – lucuma Jul 04 '13 at 15:09

score 6 · Answer 2 · edited Dec 28 '15 at 15:24

Use alias when defining Controller in your angular configuration. For example: NOTE: I'm using TypeScript here

Just take note of the Controller, it has an alias of homeCtrl.

module MongoAngular {
    var app = angular.module('mongoAngular', ['ngResource', 'ngRoute','restangular']);

    app.config([
        '$routeProvider', ($routeProvider: ng.route.IRouteProvider) => {
            $routeProvider
                .when('/Home', {
                    templateUrl: '/PartialViews/Home/home.html',
                    controller: 'HomeController as homeCtrl'
                })
                .otherwise({ redirectTo: '/Home' });
        }])
        .config(['RestangularProvider', (restangularProvider: restangular.IProvider) => {
        restangularProvider.setBaseUrl('/api');
    }]);
}

And here's the way to use it...

ng-click="homeCtrl.addCustomer(customer)"

Try it.. It might work for you as it worked for me... ;)

score 3 · Answer 3 · answered Jul 03 '13 at 20:02

3

I'm going to guess you aren't getting errors or you would've mentioned them. If that's the case, try removing the href attribute value so the page doesn't navigate away before your code is executed. In Angular it's perfectly acceptable to leave href attributes blank.

<a href="" data-router="article" ng-click="changeListName('metro')">

Also I don't know what data-router is doing but if you still aren't getting the proper result, that could be why.

answered Jul 03 '13 at 20:02

Terry

14,099
9
56
84

Data-router is for Lungo js. It has its own routing system. I can't remove the href because then lungo won't know where to route... – Justin D. Jul 03 '13 at 20:16

Angular ng-click with call to a controller function not working

3 Answers3

Linked