[javascript] 매개 변수를 모달로 전달하십시오.



Answers

다른 하나는 작동하지 않습니다. 문서에 따르면 이것이 당신이해야하는 방법입니다.

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

Question

사용자가 로그인 한 userName sa 목록에서 userName 을 트위터 부트 스트랩 modal 로 전달하려고합니다. 나는 angularjs 를 통해 데이터를 렌더링하는 angularjs 와 함께 grails 를 사용하고 있습니다.

구성

내 grails보기 페이지 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 을 전달할 수 있습니까?




AngularJS UI 부트 스트랩을 사용하고 있지 않다면, 어떻게 했습니까?

모달의 전체 요소를 보유 할 지시문을 작성하고 요소를 다시 컴파일하여 범위를 삽입합니다.

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 지시문을 추가하십시오. 클릭 한 사용자를 $ scope.aModel에 저장하면 원래 템플릿이 작동합니다.

참고 : 모달에서 전체 범위를 볼 수 있으므로 $ scope.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>



또한 모달의 인스턴스와 함께 새 속성을 추가하고 모달 컨트롤러로 가져 와서 모달 컨트롤러에 매개 변수를 쉽게 전달할 수 있습니다. 예 :

다음은 내 모달보기를 열려면 내 클릭 이벤트입니다.

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



정말 필요한 각도 UI를 사용해야합니다. 그것을 확인하십시오 : 각도 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;
}

편집 : Ui - 대화 상자의 새로운 버전 이후, 해결 항목이됩니다 :

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




Related