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

Question

Welcome To Ask or Share your Answers For Others

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

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-23T18:29:22+0000

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.

Categories

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

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

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags