Як передати параметри модально?


96

Я хочу передати userNameсписок зі userNameзареєстрованих натискань користувачів на завантажувальний твіттер modal. Я використовую граалі з angularjs , де дані надаються через angularjs .

Конфігурація

Моя сторінка перегляду граалів encouragement.gspє

<div ng-controller="EncouragementController">
    <g:render template="encourage/encouragement_modal" />
    <tr ng-cloak
                  ng-repeat="user in result.users">
                   <td>{{user.userName}}</rd>
                   <td>
                      <a class="btn btn-primary span11" href="#encouragementModal" data-toggle="modal">
                            Encourage
                       </a>
                  </td>
                </tr>

Моя encourage/_encouragement_modal.gspє

<div id="encouragementModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
      aria-hidden="true">&times;</button>
    <h3>Confirm encouragement?</h3>
  </div>
  <div class="modal-body">
      Do you really want to encourage <b>{{aModel.userName}}</b>?
  </div>
  <div class="modal-footer">
    <button class="btn btn-info"
      ng-click="encourage('${createLink(uri: '/encourage/')}',{{aModel.userName}})">
      Confirm
    </button>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Never Mind</button>
  </div>
</div>

Отже, як я можу передати userNameв encouragementModal?


1
Ви повинні обробляти ці речі за допомогою angularjs. замовлення ng-include.
zs2020

Відповіді:


149

Щоб передати параметр, потрібно використовувати роздільну здатність та вставити елементи в контролер

$scope.Edit = function (Id) {
   var modalInstance = $modal.open({
      templateUrl: '/app/views/admin/addeditphone.html',
      controller: 'EditCtrl',
      resolve: {
         editId: function () {
           return Id;
         }
       }
    });
}

Тепер, якщо ви будете використовувати так:

app.controller('EditCtrl', ['$scope', '$location'
       , function ($scope, $location, editId)

у цьому випадку editId буде невизначено. Вам потрібно ввести його таким чином:

app.controller('EditCtrl', ['$scope', '$location', 'editId'
     , function ($scope, $location, editId)

Зараз це буде працювати безперебійно, я стикаюся з тією ж проблемою багато разів, після введення все починають працювати!


Як все, що кутовий, ін'єкція - це рішення. Дякую!
Себастіалонсо

ця невизначена помилка робила мені голову, поки я не побачив вашу відповідь! Працює як шарм!
Дан

Як це зробити, якщо замість просто вар вам потрібно передати якийсь час очікування? рішення не буде
зніматися доти, доки

Те, що мені не вистачало в моєму рішенні, було використовувати $ range та $ location між простими цитатами .... Я не знав, що ці аргументи повинні бути рядками
rshimoda

1
Роблячи це, я отримую "angular.js: 10071 Помилка: [$ injector: unpr] Невідомий постачальник: editIdProvider <- editId". Якісь ідеї?
Оскар Лунд

57

Інший не працює. Згідно з документами, це саме так, як ви повинні це зробити.

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        test: function () {
          return 'test variable';
        }
      }
    });
};

var ModalInstanceCtrl = function ($scope, $modalInstance, test) {

  $scope.test = test;
};

Див. Plunkr


1
Ви не повинні обертати це на зразок ['$ range', '$ modalInstance', function () для введення залежностей?
joseramonc

1
Дякую за коментар, Хосе, саме це було моїм питанням. Якщо ви мінімізуєте свій кутовий код, так, вам доведеться використовувати синтаксис масиву для ModalInstanceCtrl.
mcole

Хосе, +1 Це була і моя проблема. І я думаю, що всі користуються AngularUI!
Маттео Дефанті

50

Крім того, ви можете створити новий діапазон і пройти через парами через параметр "область"

var scope = $rootScope.$new();
 scope.params = {editId: $scope.editId};
    $modal.open({
        scope: scope,
        templateUrl: 'template.html',
        controller: 'Controller',
    });

У вашому модальному контролері проходять у $ range, то вам не потрібно вводити і itemsProvider або те, що коли-небудь вирішує, що ви його назвали

modalController = function($scope) {
    console.log($scope.params)
}

2
$ rootScope. $ new (); <=== це слід заохочувати. дуже акуратний трюк. Дякую!
переробити

3
+1 Оскільки це дозволяє передавати дані без необхідності визначення контролера для модального. BTW ви можете просто зробити, $scope.$new(true)щоб створити новий ізольований обсяг без необхідності вводити $rootScope.
Сантош

@Mwayi: Дякую за цю пораду! Проблема класичної ін'єкції (використання resolve) полягає в тому, що аргументи є обов'язковими, тому щоразу, коли ви відкриваєте модальний режим, ви повинні вирішити всі аргументи, або виклик $modal.open()не вдасться, оскільки контролер хоче його аргументи. Використовуючи цей акуратний scopeтрюк, залежності стають необов’язковими.
stackular

23

Ви також можете легко передати параметри модальному контролеру, додавши нову властивість з екземпляром модального і отримати його до модального контролера. Наприклад:

Далі йде моя подія клацання, під час якої я хочу відкрити модальний вигляд.

 $scope.openMyModalView = function() {
            var modalInstance = $modal.open({
                    templateUrl: 'app/userDetailView.html',
                    controller: 'UserDetailCtrl as userDetail'
                });
                // add your parameter with modal instance
                modalInstance.userName = 'xyz';
        };

Модальний контролер:

angular.module('myApp').controller('UserDetailCtrl', ['$modalInstance',
                function ($modalInstance) {
                    // get your parameter from modal instance
                    var currentUser = $modalInstance.userName;
                    // do your work...
                }]);

Саме те, що мені було потрібно. Працював ідеально.
theFish

17

Я спробував, як нижче.

Я зателефонував ng-clickконтролеру angularjs на кнопку Заохочення ,

               <tr ng-cloak
                  ng-repeat="user in result.users">
                   <td>{{user.userName}}</rd>
                   <td>
                      <a class="btn btn-primary span11" ng-click="setUsername({{user.userName}})" href="#encouragementModal" data-toggle="modal">
                            Encourage
                       </a>
                  </td>
                </tr>

Я поставив userNameз encouragementModalвід angularjs контролера.

    /**
     * Encouragement controller for AngularJS
     * 
     * @param $scope
     * @param $http
     * @param encouragementService
     */
    function EncouragementController($scope, $http, encouragementService) {
      /**
       * set invoice number
       */
      $scope.setUsername = function (username) {
            $scope.userName = username;
      };
     }
    EncouragementController.$inject = [ '$scope', '$http', 'encouragementService' ];

Я надав місце ( userName) для отримання значення від контролера angularjs encouragementModal.

<div id="encouragementModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
      aria-hidden="true">&times;</button>
    <h3>Confirm encouragement?</h3>
  </div>
  <div class="modal-body">
      Do you really want to encourage <b>{{userName}}</b>?
  </div>
  <div class="modal-footer">
    <button class="btn btn-info"
      ng-click="encourage('${createLink(uri: '/encourage/')}',{{userName}})">
      Confirm
    </button>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Never Mind</button>
  </div>
</div>

Це спрацювало, і я вітав себе.


3
Я +1 і вітаю вас. Якщо комусь потрібно передати цілого користувача модальному, а не окремому рядку для її імені, в контролері не забудьте використовувати angular.copy(user).
youri

10

Вам дійсно слід використовувати Angular UI для цих потреб. Перевірте: діалогове вікно інтерфейсу користувача

Коротше кажучи, за допомогою діалогового інтерфейсу Angular UI ви можете передати змінну від контролера до контролера діалогу, використовуючи resolve. Ось ваш контролер "від":

var d = $dialog.dialog({
  backdrop: true,
  keyboard: true,
  backdropClick: true,
  templateUrl:  '<url_of_your_template>',
  controller: 'MyDialogCtrl',
  // Interesting stuff here.
  resolve: {
    username: 'foo'
  }
});

d.open();

І у вашому діалоговому контролері:

angular.module('mymodule')
  .controller('MyDialogCtrl', function ($scope, username) {
  // Here, username is 'foo'
  $scope.username = username;
}

EDIT: Оскільки нова версія діалогового вікна інтерфейсу, запис роздільної здатності стає:

resolve: { username: function () { return 'foo'; } }


Привіт, я не намагався цим способом. Але +1 для пропозиції.
prayagupd

3
насправді це повинно бутиresolve: function(){return {username: 'foo'}}
SET

Відповідь SET не буде працювати. велосипед має його прямо внизу, це повинно бути вирішено: {data: function () {return 'foo';}}
bornytm

1
@bornytm Сьогодні ти маєш рацію. Але коли моя відповідь була написана, синтаксис звучав так:resolve: { username: 'foo'}
Сандро Мунда,

4

Ви можете просто створити функціонал контролера і передати свої параметри об'єкту $ range.

$scope.Edit = function (modalParam) {
var modalInstance = $modal.open({
      templateUrl: '/app/views/admin/addeditphone.html',
      controller: function($scope) {
        $scope.modalParam = modalParam;
      }
    });
}

1

Якщо ви не використовуєте AngularJS UI Bootstrap, ось як я це зробив.

Я створив директиву, яка буде містити весь цей елемент вашого модалу, і перекомпілюю елемент для введення в нього вашої області застосування.

angular.module('yourApp', []).
directive('myModal',
       ['$rootScope','$log','$compile',
function($rootScope,  $log,  $compile) {
    var _scope = null;
    var _element = null;
    var _onModalShow = function(event) {
        _element.after($compile(event.target)(_scope));
    };

    return {
        link: function(scope, element, attributes) {
            _scope = scope;
            _element = element;
            $(element).on('show.bs.modal',_onModalShow);
        }
    };
}]);

Я припускаю, що ваш модальний шаблон знаходиться в межах вашого контролера, а потім додайте директиву my-modal до вашого шаблону. Якщо ви зберегли натиснутого користувача до $ range.aModel , оригінальний шаблон тепер запрацює.

Примітка: Тепер вся область видимості для вашого модалу, тому ви також можете отримати доступ до $ range.users в ньому.

<div my-modal id="encouragementModal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
      aria-hidden="true">&times;</button>
    <h3>Confirm encouragement?</h3>
  </div>
  <div class="modal-body">
      Do you really want to encourage <b>{{aModel.userName}}</b>?
  </div>
  <div class="modal-footer">
    <button class="btn btn-info"
      ng-click="encourage('${createLink(uri: '/encourage/')}',{{aModel.userName}})">
      Confirm
    </button>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Never Mind</button>
  </div>
</div>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.