Làm thế nào để chuyển các tham số cho một phương thức?

Tôi muốn chuyển userNametừ danh sách userNamengười dùng đã đăng nhập bị nhấp vào twitter bootstrap modal. Tôi đang sử dụng grails với anglejs , nơi dữ liệu được hiển thị thông qua anglejs .

Cấu hình

Trang xem grails của tôi encouragement.gsplà

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

Của tôi encourage/_encouragement_modal.gsplà

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

Vì vậy, làm thế nào tôi có thể vượt qua userNameđể encouragementModal?

Để chuyển tham số, bạn cần sử dụng giải quyết và chèn các mục trong bộ điều khiển

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

Bây giờ nếu bạn sẽ sử dụng như thế này:

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

trong trường hợp này, editId sẽ không được xác định. Bạn cần phải tiêm nó, như thế này:

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

Bây giờ nó sẽ hoạt động trơn tru, tôi phải đối mặt với cùng một vấn đề nhiều lần, một khi được tiêm, mọi thứ bắt đầu hoạt động!

Cái kia không hoạt động. Theo các tài liệu đây là cách bạn nên làm.

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

Xem plunkr

Ngoài ra, bạn có thể tạo một phạm vi mới và chuyển qua các tham số thông qua tùy chọn phạm vi

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

Trong thẻ điều khiển phương thức của bạn trong $ scope, sau đó bạn không cần phải chuyển vào và itemsProvider hoặc những gì bạn đã đặt tên cho nó

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

Bạn cũng có thể dễ dàng chuyển các tham số đến bộ điều khiển phương thức bằng cách thêm một thuộc tính mới với phiên bản của phương thức và đưa nó vào bộ điều khiển phương thức. Ví dụ:

Sau đây là sự kiện nhấp chuột của tôi mà tôi muốn mở chế độ xem phương thức.

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

Bộ điều khiển phương thức:

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

Tôi đã thử như dưới đây.

Tôi đã gọi ng-clickđến bộ điều khiển anglejs trên nút Khuyến khích ,

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

Tôi thiết lập userNamecác encouragementModaltừ angularjs điều khiển.

    /**
     * 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' ];

Tôi đã cung cấp một nơi ( userName) để nhận giá trị từ bộ điều khiển anglejs 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>

Nó hoạt động và tôi tự chào mình.

Bạn thực sự nên sử dụng Angular UI cho nhu cầu đó. Hãy khám phá: Hộp thoại Angular UI

Tóm lại, với hộp thoại Angular UI, bạn có thể chuyển biến từ bộ điều khiển sang bộ điều khiển hộp thoại bằng cách sử dụng resolve. Đây là bộ điều khiển "từ" của bạn:

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();

Và trong bộ điều khiển hộp thoại của bạn:

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

CHỈNH SỬA: Kể từ phiên bản mới của hộp thoại ui, mục giải quyết sẽ trở thành:

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

Bạn có thể chỉ cần tạo một funciton bộ điều khiển và chuyển các tham số của mình với đối tượng $ scope.

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

Nếu bạn không sử dụng AngularJS UI Bootstrap, đây là cách tôi đã làm.

Tôi đã tạo một chỉ thị sẽ giữ toàn bộ phần tử đó trong phương thức của bạn và biên dịch lại phần tử để đưa phạm vi của bạn vào đó.

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

Tôi giả sử mẫu phương thức của bạn nằm trong phạm vi bộ điều khiển của bạn, sau đó thêm chỉ thị my-modal vào mẫu của bạn. Nếu bạn đã lưu người dùng được nhấp vào $ scope.aModel , thì mẫu ban đầu bây giờ sẽ hoạt động.

Lưu ý: Toàn bộ phạm vi hiện được hiển thị cho phương thức của bạn, do đó bạn cũng có thể truy cập $ scope.users trong đó.

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