Angularjs +模型+传递参数和对象

Question

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

Click here:

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

}); 

如何通过范围URL和数据值进入弹出。 我看到几个例子传递使用决心。

请检查我的例子

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”与名“决心”。它让你分享（通过）参数的controller.For例如一个属性：

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