Question

我正在使用angularjs。我正在尝试将参数和对象发送到弹出窗口。

Html代码：

<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="https://rawgit.com/dwmkerr/angular-modal-service/master/dst/angular-modal-service.js"></script>

<div class="container" ng-app="app" ng-controller="Controller">

    <h3>Angular Modal Service</h3>
     <a class="btn btn-default" href ng-click="show()">Show a Modal</a>
     <p>{{message}}</p>

     <!-- The actual modal template, just a bit o bootstrap -->
     <script type="text/ng-template" id="modal.html">
         <div class="modal fade">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Yes ossssssssr No?</h4>
              </div>
              <div class="modal-body">
                <p>It's your call...</p>
              </div>
              <div class="modal-footer">
                <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
                <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
              </div>
            </div>
          </div>
        </div>
     </script>

</div>

Js代码：

var app = angular.module('app', ['angularModalService']);

app.controller('Controller', function($scope, ModalService) {

    $scope.url = 'google.com';
    var obj= {};
    obj.name = "test"
    $scope.data = obj;

    $scope.show = function() {
        ModalService.showModal({
            templateUrl: 'modal.html',
            controller: "ModalController"
        }).then(function(modal) {
            modal.element.modal();
            modal.close.then(function(result) {
                $scope.message = "You said " + result;
            });
        });
    };

});

app.controller('ModalController', function($scope, close) {

 $scope.close = function(result) {
    close(result, 500); // close, but give 500ms for bootstrap to animate
 };

});

如何将范围网址和数据值传递到弹出窗口中。我看到几个使用resolve传递的例子。

请查看我的示例

Answer 1

试试这个：

            ModalService.showModal({
                templateUrl: 'modal.html',
                controller: "ModalController",
                resolve : {
                    data: function () {
                        return $scope.data
                    }
                }
            })

在模型控制器中，您可以获得类似

的数据

app.controller('ModalController', function($scope, close, data) {

 $scope.close = function(result) {
    close(result, 500); // close, but give 500ms for bootstrap to animate
 };

});

Answer 2

使用数据调用广播到您的模态，并捕获事件：

var app = angular.module('app', ['angularModalService']);

app.controller('Controller', function($scope, $rootScope, ModalService) {

    $scope.url = 'google.com';
    var obj= {};
    obj.name = "test"
    $scope.data = obj;

    $scope.show = function() {
        ModalService.showModal({
            templateUrl: 'modal.html',
            controller: "ModalController"
        }).then(function(modal) {
            modal.element.modal();
            modal.close.then(function(result) {
                $rootScope.$broadcast('ModalController:set', {message: "You said " + result});
            });
        });
    };

});

app.controller('ModalController', function($scope, close) {

 $scope.close = function(result) {
    close(result, 500); // close, but give 500ms for bootstrap to animate
 };

  $scope.$on('ModalController:set', function(event, data) {
    for(var i in data) {
      $scope[i] = data[i];
    }
  });

});

Answer 3

“ showModal ”有一个名为“解析”的属性。它允许您共享（传递）参数到控制器。例如：

   ModalService.showModal({
       templateUrl: 'modal.html',
       controller: "ModalController",
       resolve : {
          data: function () { // ro you can pass a value in stead of function
              return $scope.data
          }
       }
   })

在控制器中，您可以注入，例如服务，或者将其与范围一起使用，例如 scope.data < / p>

Angularjs + model +传递参数和对象

3 个答案: