with angular ng-click and calling controller function doesn't work

Justin D.

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

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

The link will go to another controller, ItemCtrl.

I want to pass variable to 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 the angular click event to trigger the following function:

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

However, ng-click doesn't seem to change the value of my shared attribute...

renew

I put an alert in a function that is fired by ng-click and the alert should be fired.

However, when I write the function like this:

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

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

If I put it outside a function with a dummy name (e.g. Metro) it works.

Update 3

I've tried multiple ways and I'm pretty sure the problem is with this function:

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

Do you know why this is happening?

lucuma

You should probably use the ngHref directive with 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're using, but at least it will let you link and use the ngClick function.

**renew**

Here's a demo of the scenario to use the service well.

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*

Check out https://github.com/centralway/lungo-angular-bridge which discusses how to use breast augmentation and angles. Also note that if the page completely reloads when browsing to another link, you will need to persist the shared attribute in localstorage and/or cookies.

Related

Angular ng-keyup doesn't work when calling function

Elliott Coe I have the following code: <input type="text" ng-model="keywords" ng-keyup="search()"> Where is it not calling the search function, if I do ng-click="search()" it does work. why is it like this? Matt Way ng-keyupWorks fine for me. See this fiddle

Angular ng-keyup doesn't work when calling function

Elliott Coe I have the following code: <input type="text" ng-model="keywords" ng-keyup="search()"> Where is it not calling the search function, if I do ng-click="search()" it does work. why is it like this? Matt Way ng-keyupWorks fine for me. See this fiddle

ng-click function inside controller doesn't work

Sol I'm trying to make an app with three tabs using routeProvider ng-view and 3 controllers. I have made a main HTML page and 3 tab HTML pages. Switching the tabs works fine and I can access the variables in tab one; however, I cannot access the functions decl

Angular ng-keyup doesn't work when calling function

Elliott Coe I have the following code: <input type="text" ng-model="keywords" ng-keyup="search()"> Where is it not calling the search function, if I do ng-click="search()" it does work. why is it like this? Matt Way ng-keyupWorks fine for me. See this fiddle

ng-show calling function doesn't work

ps0604 In this PLUNK I have a div that has an ng-showelement in it that calls a function that show()returns false . Therefore, I want the div not to be displayed. Also, see that the show()function is called twice (console.log shows the variable twice) sh. how

Calling function with angular ng-click doesn't work

Program 345 I am trying to switch the view from one page to another when a button is pressed. I'm using ng-click but it doesn't switch views when the button is pressed .js file $scope.onCreateAppointment = function () { $scope.templates.myTempla

Angular ng-keyup doesn't work when calling function

Elliott Coe I have the following code: <input type="text" ng-model="keywords" ng-keyup="search()"> Where is it not calling the search function, if I do ng-click="search()" it does work. why is it like this? Matt Way ng-keyupWorks fine for me. See this fiddle

ng-click directive not calling controller function

CE0 I'm developing an ionic app and trying to call a function from a controller using ng-click. This is the function I want to call. function startSpin() { if ($scope.wheelSpinning == false) { spinWheel.animation.spins = 9;

Calling function with angular ng-click doesn't work

Program 345 I am trying to switch the view from one page to another when a button is pressed. I'm using ng-click but it doesn't switch views when the button is pressed .js file $scope.onCreateAppointment = function () { $scope.templates.myTempla