带角度ng-click并调用控制器功能不起作用


76

我需要将变量传递给另一个控制器。我有以下与ListCtrl相关的代码:

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

链接将转到另一个控制器ItemCtrl。

我想将变量传递给ItemCtrl。我想到了使用一个名为SharedProperties的服务:

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

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

单击链接后,我将调用角度单击事件以触发以下功能:

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

但是,ng-click似乎并没有改变我共享属性的值...

更新

我在ng-click触发的函数中放置了一个警报,并且警报应该被触发。

但是,当我这样编写函数时:

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

它不起作用...看起来像“ sharedProperties.setListName(name);” 没有执行...

如果我使用虚拟名称(例如Metro)将其放在函数之外,则它可以工作。

更新3

我尝试了多种方法,并且我很确定问题出在此功能上:

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

您知道为什么会这样吗?

Answers:


104

您可能应该将ngHref指令与ngClick一起使用:

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

这是一个示例: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';
  }
});

我不知道这是否可以与您正在使用的库一起使用,但至少可以让您链接和使用ngClick函数。

**更新**

这是集合的演示,可以正常使用服务。

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;
        }
    };


});

*编辑*

请查看https://github.com/centralway/lungo-angular-bridge,其中讨论了如何使用隆胸和角度。另请注意,如果在浏览到另一个链接时页面完全重新加载,则需要将共享属性持久存储在localstorage和/或cookie中。


它看起来像两ng-refhrefng-click被触发,触发我的功能。我更新了答案以更好地反映我的问题。
贾斯汀D.

您现在要问一个单独的问题吗?
lucuma

我通过您的服务修改了插件,效果很好。我怀疑您还有其他问题。您将看到“获取表单服务”链接的文本随服务中的值一起更新。
lucuma

我看到它在jsfiddle中工作正常。您知道为什么它不能在我的应用程序中工作吗?
贾斯汀D.

我找到了错误的根源。它来自我的第二个控制器。尽管在我的示例中第一个控制器确实将字符串设置为“ metro”,但sharedProperties.getListName()方法返回一个空字符串。我在此处重现了行为plnkr.co/edit/FSH0tP0YBFeGwjIhKBSx?p=preview
Justin D.

4

在角度配置中定义Controller时,请使用别名。例如:注意:我在这里使用TypeScript

只需注意Controller,它的别名为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');
    }]);
} 

这是使用它的方式...

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

尝试一下。它可能对您有用,对我也有用...;)


3

我猜您没有收到错误,或者您会提到它们。如果是这种情况,请尝试删除href属性值,以使页面在执行代码之前不会离开。在Angular中,将href属性留为空白是完全可以接受的。

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

我也不知道data-router在做什么,但是如果您仍然没有得到正确的结果,那可能就是原因。


数据路由器适用于Lungo js。它有自己的路由系统。我无法删除href,因为那不来,隆哥不知道该去哪里……
贾斯汀
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.