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     lt a href   items  data-router  article  ng-click  changeListName  metro    gt    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

User · Answer

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

User · Answer

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    lt a href    data-router  article  ng-click  changeListName  metro    gt    Also I don t know what data-router is doing but if you still aren t getting the proper result  that could be why

User · Answer

You should probably use the ngHref directive along with the ngClick     lt a ng-href   here  ng-click  go     gt click me lt  a gt    Here is an example   http   plnkr co edit FSH0tP0YBFeGwjIhKBSx p preview   lt body ng-controller  MainCtrl  gt       lt p gt Hello   name    lt  p gt        msg        lt a ng-href   here  ng-click  go     gt click me lt  a gt       lt div style  height 1000px  gt          lt a id  here  gt  lt  a gt        lt  div gt        lt h1 gt here lt  h1 gt     lt  body gt   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

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

Examples related to angularjs