javascript - ventana - ¿Cómo mostrar información dentro de modal desde url?
modal bootstrap ejemplos (2)
Soy muy nuevo en js en general, así que tenga paciencia conmigo.
Necesito hacer una tarea simple que se establece en el tema. Hice algunas investigaciones e intenté usar ui.router, pero como no soy muy bueno con la codificación, algo salió mal.
Quiero que esta información de la url se muestre dentro del diálogo modal http://prntscr.com/ashi5e
Así que aquí está el código:
angular.module(''plunker'', [''ui.bootstrap'']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: ''myModalContent.html'',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.cancel = function () {
$modalInstance.dismiss(''cancel'');
};
};
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="js/example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>Log</h3>
</div>
<div class="modal-body">
Content
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Close</button>
</div>
</script>
<button class="btn" ng-click="open()">Log</button>
</div>
</body>
</html>
Necesita obtener los datos (por ejemplo, con un servicio) y ponerlos en $ scope.items. En su modal haga lo mismo: obtenga los artículos y agréguelos a su alcance. Eso es todo
angular.module(''plunker'', [''ui.bootstrap'']);
var ModalDemoCtrl = function ($scope, $modal, $log, $http) {
/* Get data here with a service or smth */
$scope.items = '''';
$scope.open = function () {
$http.get("YOUR_URL")
.then(function(response) {
$scope.items = response.data
var modalInstance = $modal.open({
templateUrl: ''myModalContent.html'',
controller: ''ModalInstanceCtrl'',
resolve: {
items: function () {
return $scope.items;
}
}
});
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.cancel = function () {
$modalInstance.dismiss(''cancel'');
};
};
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="js/example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>Log</h3>
</div>
<div class="modal-body">
{{items}}
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Close</button>
</div>
</script>
<button class="btn" ng-click="open()">Log</button>
</div>
</body>
</html>
No ha registrado modalDemoCtrl ni ModalInstanceCtrl al principio necesita registrar ambos controladores como: myApp.controller(''modalDemoCtrl'', ModalDemoCtrl); donde myApp es un módulo angular como: var myApp = angular.module(''plunker'', [''ui.bootstrap'']); .
puede usar un servicio para obtener datos de una url usando $http y ese servicio modalInstance en su controlador modalInstance . en mi ejemplo crea dataService y una función llamada getData y llamó a esta función desde el controlador modalInstance . como: dataService.getData().then(.. y use entonces la función para obtener respuesta y almacenar los datos de respuesta en la variable $scope.infos para que pueda usar este $scope.infos en su modal.
var myApp = angular.module(''plunker'', [''ui.bootstrap'']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: ''myModalContent.html'',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
};
myApp.controller(''modalDemoCtrl'', ModalDemoCtrl);
myApp.factory(''dataService'', function($http) {
return {
getData: function() {
return $http.get(''http://prnt.sc/ashi5e'');
}
};
});
var ModalInstanceCtrl = function ($scope, $modalInstance, items, dataService) {
dataService.getData().then(function(response) {
$scope.infos = response.data;
});
$scope.cancel = function () {
$modalInstance.dismiss(''cancel'');
};
};
myApp.controller(''ModalInstanceCtrl'', ModalInstanceCtrl);