[英]Angularjs + model + pass parameters and object
I am using angularjs. 我正在使用angularjs。 I am trying to send parameters and object into the popup. 我正在尝试将参数和对象发送到弹出窗口。
Html code: 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">×</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 Code: 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
};
});
How to pass the scope url and data values into the popup. 如何将范围url和数据值传递到弹出窗口。 I saw few example to pass using resolve. 我看到很少有使用决心通过的例子。
Please check my example 请检查我的例子
try this: 尝试这个:
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController",
resolve : {
data: function () {
return $scope.data
}
}
})
in model controller you can get data like 在模型控制器中,您可以获得类似
app.controller('ModalController', function($scope, close, data) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
});
Call broadcast with data to Your modal, and catch event: 呼叫带有数据的广播到您的模态,并捕获事件:
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];
}
});
});
" showModal " has a property with name " resolve ".It lets you to share (pass) parameters to the controller.For example: “ showModal ”具有一个名为“ resolve ”的属性。它允许您将参数共享(传递)到控制器。例如:
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController",
resolve : {
data: function () { // ro you can pass a value in stead of function
return $scope.data
}
}
})
And in controller you can inject it like services or use it with scope like scope.data 在控制器中,您可以像服务一样注入它,或将它与scope.data之类的 作用域 一起使用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.