Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

angularjs

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?

like image 270
Justin D. Avatar asked Jul 03 '13 19:07

Justin D.


3 Answers

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.

like image 131
lucuma Avatar answered Nov 14 '22 19:11

lucuma


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... ;)

like image 34
Jayson Avatar answered Nov 14 '22 21:11

Jayson


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.

like image 3
Terry Avatar answered Nov 14 '22 20:11

Terry