모달에 매개 변수를 전달하려면 어떻게 해야 합니까?

모달에 매개 변수를 전달하려면 어떻게 해야 합니까?

합격하고 싶다userName리스트에서userName로그인한 사용자가 twitter 부트스트랩을 클릭하다modalangularjs를 사용하여 데이터를 angularjs로 렌더링하는 grail을 사용하고 있습니다.

배열

내 Graphes 보기 페이지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?

매개 변수를 전달하려면 컨트롤러의 항목을 해결하고 주입해야 합니다.

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

이제 원활하게 작동하게 됩니다. 여러 번 같은 문제에 직면하게 되고, 한 번 주입되면 모든 것이 작동하게 됩니다!

다른 하나는 작동하지 않습니다.의사들에 따르면 이렇게 해야 한다고 합니다.

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

'플랭크' 참조

또는 새 스코프를 만들고 스코프 옵션을 통해 매개 변수를 통과시킬 수 있습니다.

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

$scope로 전달되는 모달 컨트롤러에서는, 및 itemsProvider나 그 해결 방법을 전달할 필요가 없습니다.

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

또한 모달 인스턴스와 함께 새 속성을 추가하여 모달 컨트롤러에 파라미터를 쉽게 전달할 수 있습니다.예를 들어 다음과 같습니다.

다음은 모달 뷰를 열고 싶은 클릭 이벤트입니다.

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

나는 아래와 같이 시도했다.

전화해봤어요.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의encouragementModalangularjs 컨트롤러에서 가져옵니다.

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

효과가 있었고 나는 스스로에게 경례를 했다.

이 경우 Angular UI를 사용해야 합니다.확인: Angular UI 대화 상자

간단히 말하면, Angular UI 대화상자를 사용하여 변수를 컨트롤러에서 대화상자 컨트롤러로 전달할 수 있습니다.resolve. "from" 컨트롤러는 다음과 같습니다.

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-dialog에서 해결 항목은 다음과 같습니다.

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

컨트롤러 기능을 만들고 $scope 객체를 사용하여 파라미터를 전달할 수 있습니다.

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

Angular를 사용하지 않는 경우JS 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);
        }
    };
}]);

modal 템플릿은 컨트롤러 범위 내에 있다고 가정하고 directive 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>

언급URL : https://stackoverflow.com/questions/18576454/how-to-pass-parameters-to-a-modal