Кутовий клацання ng-клацанням із викликом функції контролера не працює


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, схоже, не змінює значення мого спільного ресурсу ...

ОНОВЛЕННЯ

Я поміщаю попередження всередину функції, яка запускається клацанням ng, і сповіщення спрацьовує, як і має бути.

Однак, коли я пишу свою функцію так:

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

Це не працює ... схоже на 'sharedProperties.setListName (name);' не виконується ...

Якщо я поміщу його поза функцією з фіктивним іменем (наприклад, метро), це працює ..

ОНОВЛЕННЯ 3

Я спробував кілька речей, і я впевнений, що проблема полягає в цій функції:

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

Ви уявляєте, чому це відбувається?

Відповіді:


105

Ймовірно, вам слід використовувати директиву 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, де розповідається про те, як використовувати lungo та angular. Також зверніть увагу, що якщо ваша сторінка повністю перезавантажується під час перегляду іншого посилання, вам потрібно буде зберегти ваші спільні властивості в localstorage та / або файлі cookie.


Це схоже на те, що і з, ng-refі href, ng-clickспрацьовує і запускає мою функцію. Я оновив свою відповідь, щоб краще відображати свою проблему.
Джастін Д.

Ви зараз задаєте окреме запитання?
lucuma

Я змінив свій плюнкер з вашою послугою, і він працює нормально. Підозрюю, у вас трапляється якесь інше питання. Ви побачите текст оновлення посилання служби отримання форми зі значенням служби.
lucuma

Я бачу, що це добре працює в jsfiddle. Ви уявляєте, чому це не працює в моєму додатку?
Джастін Д.

Я знайшов джерело помилки. Це надходить від мого другого контролера. Метод sharedProperties.getListName () повертає порожній рядок, хоча перший контролер у моєму прикладі встановив для рядка значення "metro". Я відтворив поведінку тут plnkr.co/edit/FSH0tP0YBFeGwjIhKBSx?p=preview
Justin D.

4

Використовуйте псевдонім, визначаючи Controller у вашій кутовій конфігурації. Наприклад: ПРИМІТКА: Тут я використовую TypeScript

Просто зверніть увагу на контролер, він має псевдонім 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, тому що тоді lungo не знатиме, куди рухатися ...
Justin D.
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.