javascript - tpls - ¿Cómo usar el componente angular con ui.bootstrap.modal en angular 1.5?

ui bootstrap tpls 2.5 0

Question

Me gustaría usar el componente angular con ui.bootstrap.modal. la versión angular es 1.5.
Traté de usar como a continuación.

componente

function MyComponentController($uibModalInstance){
var ctrl = this;
ctrl.doSomething = function() {
//doSomething
}
}
app.component(''myComponent'', {
contoller: MyComponentController,
templateUrl: ''/path/to/myComponent.html''
}

Controlador principal

function parentController($uibModal){
var ctrl = this;
ctrl.openModal = function(){
var modalInstance = $uibModal.open({
template: ''<my-component></my-component>''
}
}

Y cuando ejecuto parentController.openModal() , recibí el error de $ injector: unpr Desconocido Proveedor aunque la ventana modal está abierta.
¿Hay alguna manera de usar el componente angular con ui.bootstrap.modal? Si necesita más información, hágamelo saber.
Gracias.

EDITAR
Tengo una forma de usar el componente con ui.bootstrap.modal de Renato Machado, gracias Renato.
Pero siento que es un poco complicado y no es conveniente. Así que, finalmente, creo que es mejor usar el componente dentro del modal.
Modal se abre de manera regular (simplemente configure el controlador y la plantilla en $uibModal.open({}) ) y el modal contiene el componente que tiene las lógicas que desea usar comúnmente.
Modal debería tener solo lógicas simples que estén relacionadas con modal como ventana modal cercana.
Otra lógica principalmente relacionada con negocios / Aplicación debe estar en el componente.
Hace fácil de común.

Answer 1

Debe pasar el controlador primario al componente modal con la instancia modal en él. Para hacer eso, necesitas agregar el HTML de generación del modal en el componente padre

componente padre

$ctrl.openModal = function(){
$ctrl.modalInstance = $uibModal.open({
template: ''<your-modal></your-modal>'',
appendTo : $document.find(''parentComponent'')
});
}

componente modal

.component(''yourModal'', {
templateUrl: ''path/to/modal.html'',
replace: true,
require: {
parent : ''^parentComponent''
},
controller: ModalCtrl
});
function ModalCtrl() {
var $ctrl = this;
$ctrl.$onInit = function(){
var instance = $ctrl.parent.modalInstance;
$ctrl.items = [''item1'', ''item2'', ''item3''];
$ctrl.selected = {
item: $ctrl.items[0]
};
$ctrl.ok = function () {
instance.close($ctrl.selected);
};
$ctrl.cancel = function () {
instance.dismiss(''cancel'');
};
instance.result.then(function (selectedItem) {
$ctrl.selected = selectedItem;
}, function () {
console.log(''Modal dismissed at: '' + new Date());
});
};
}

Tenga cuidado porque el controlador requerido solo estará disponible después de $ onInit.

Answer 2

EDITAR: A partir de UI Bootstrap 2.1.0 hay soporte nativo para el componente en modals bootstrap. Parece que ha habido varias versiones rápidas después de la versión 2.1.0 para solucionar algunos problemas con los modales, así que me aseguraré de obtener la última.

Vea este Plunk para una versión usando UI Bootstrap 2.1.0+

http://plnkr.co/edit/jy8WHfJLnMMldMQRj1tf?p=preview

angular.module(''app'', [''ngAnimate'', ''ui.bootstrap'']);
angular.module(''app'')
.component(''myContent'', {
template: ''I am content! <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open Modal</button>'',
controller: function($uibModal) {
$ctrl = this;
$ctrl.dataForModal = {
name: ''NameToEdit'',
value: ''ValueToEdit''
}
$ctrl.open = function() {
$uibModal.open({
component: "myModal",
resolve: {
modalData: function() {
return $ctrl.dataForModal;
}
}
}).result.then(function(result) {
console.info("I was closed, so do what I need to do myContent''s controller now. Result was->");
console.info(result);
}, function(reason) {
console.info("I was dimissed, so do what I need to do myContent''s controller now. Reason was->" + reason);
});
};
}
});
angular.module(''app'')
.component(''myModal'', {
template: `<div class="modal-body"><div>{{$ctrl.greeting}}</div>
<label>Name To Edit</label> <input ng-model="$ctrl.modalData.name"><br>
<label>Value To Edit</label> <input ng-model="$ctrl.modalData.value"><br>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleClose()">Close Modal</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleDismiss()">Dimiss Modal</button>
</div>`,
bindings: {
modalInstance: "<",
resolve: "<"
},
controller: [function() {
var $ctrl = this;
$ctrl.$onInit = function() {
$ctrl.modalData = $ctrl.resolve.modalData;
}
$ctrl.handleClose = function() {
console.info("in handle close");
$ctrl.modalInstance.close($ctrl.modalData);
};
$ctrl.handleDismiss = function() {
console.info("in handle dismiss");
$ctrl.modalInstance.dismiss("cancel");
};
}]
});

La respuesta original está a continuación:

Intentaba resolver esto el otro día también. Tomé la información que encontré en esta publicación junto con este enlace para tratar de encontrar una forma alternativa de lograr esto. Estos son algunos enlaces de referencia que encontré que me ayudaron:

https://github.com/angular-ui/bootstrap/issues/5683

http://www.codelord.net/ (este ayudó a entender pasar argumentos a callbacks en componentes)

También aquí hay un Plunk: http://plnkr.co/edit/PjQdBUq0akXP2fn5sYZs?p=preview

Traté de demostrar un escenario común en el mundo real de usar un modal para editar algunos datos.

angular.module(''app'', [''ngAnimate'', ''ui.bootstrap'']);
angular.module(''app'')
.component(''myContent'', {
template: ''I am content! <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open Modal</button>'',
controller: function($uibModal) {
$ctrl = this;
$ctrl.dataForModal = {
name: ''NameToEdit'',
value: ''ValueToEdit''
}
$ctrl.open = function() {
$uibModal.open({
template: ''<my-modal greeting="$ctrl.greeting" modal-data="$ctrl.modalData" $close="$close(result)" $dismiss="$dismiss(reason)"></my-modal>'',
controller: [''modalData'', function(modalData) {
var $ctrl = this;
$ctrl.greeting = ''I am a modal!''
$ctrl.modalData = modalData;
}],
controllerAs: ''$ctrl'',
resolve: {
modalData: $ctrl.dataForModal
}
}).result.then(function(result) {
console.info("I was closed, so do what I need to do myContent''s controller now and result was->");
console.info(result);
}, function(reason) {
console.info("I was dimissed, so do what I need to do myContent''s controller now and reason was->" + reason);
});
};
}
});
angular.module(''app'')
.component(''myModal'', {
template: `<div class="modal-body"><div>{{$ctrl.greeting}}</div>
<label>Name To Edit</label> <input ng-model="$ctrl.modalData.name"><br>
<label>Value To Edit</label> <input ng-model="$ctrl.modalData.value"><br>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleClose()">Close Modal</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.handleDismiss()">Dimiss Modal</button>
</div>`,
bindings: {
$close: ''&'',
$dismiss: ''&'',
greeting: ''<'',
modalData: ''<''
},
controller: [function() {
var $ctrl = this;
$ctrl.handleClose = function() {
console.info("in handle close");
$ctrl.$close({
result: $ctrl.modalData
});
};
$ctrl.handleDismiss = function() {
console.info("in handle dismiss");
$ctrl.$dismiss({
reason: ''cancel''
});
};
}],
});

Answer 3

No hay necesidad de hacerlo más complicado pasando el controlador principal, solo puede acceder desde el componente que muestra el modal.

Componente

/**
* @ngdoc component
* @name fsad.component:video
*
* @description <fsad-video> component, in development...
*
*/
(function () {
''use strict'';
angular.module(''fsad'').component(''fsadVideo'', {
bindings: {},
templateUrl: function(appConstant){return appConstant.paths.modules.fsad + ''leefloon/fsad-video.html''},
controller: controller
});
controller.$inject = [''$scope''];
function controller($scope){
var $ctrl = this;
setDataModel();
/****************************************************************/
$ctrl.ui.close = close;
/****************************************************************/
function setDataModel(){
$ctrl.ui = {};
}
function close(){
$scope.$parent.$close();
}
}
}());

Apertura de la modal

 var modalInstance = $uibModal.open({
backdrop: ''static'',
keyboard: true,
backdropClick: false,
template: ''<fsad-video></fsad-video>'',
windowClass: ''edit-contactenblad'',
});

Como está indicando que la plantilla es un componente, $ scope. $ Parent siempre apuntará a la instancia modal. Permitiéndole acceder a la función $ close ().

Pasar y recibir datos

Si necesita pasar datos al componente o recibir datos del componente, puede hacerlo así.

 var modalInstance = $uibModal.open({
backdrop: ''static'',
keyboard: true,
backdropClick: false,
template: ''<fsad-video method="$ctrl.method" on-viewed="$ctrl.userHasViewedVideo(time)"></fsad-ideo>'',
controller: function(){
this.method = method;
this.userHasViewedVideo = function(time){}
},
controllerAs: ''$ctrl'',
windowClass: ''edit-medewerker'',
});

Solo en una nota al margen, estoy usando esta guía de estilo de estructura para crear el componente.

Answer 4

Si desea acceder a las funciones $close() y $ dismiss $close() $ uibModal, junto con algunos datos principales y enlace de función dentro de su componente, puede pasarlos a todos de la siguiente manera:

Open Modal Logic

$uibModal.open({
template: ''<login close="$close()" dismiss="$dismiss()" '' +
''email="$ctrl.cookieEmail" check-login="$ctrl.ajaxLogin(user, pass)"></login>'',
controller: function () {
this.cookieEmail = $cookies.get(''savedEmail'');
this.ajaxLogin = AjaxLoginService.login;
},
controllerAs: ''$ctrl''
});

Componente de inicio de sesión modal

{
templateUrl: ''view/login.html'',
bindings: {
email: ''<'',
checkLogin: ''&'',
close: ''&'',
dismiss: ''&''
},
controller: function () {
var viewModel = this;
viewModel.password = '''';
viewModel.submit = function () {
viewModel.checkLogin(
{ user: viewModel.email, pass: viewModel.password }
).then(function (success) {
viewModel.close();
});
}
}
}

HTML modal

<form ng-submit="$ctrl.submit()">
<input type="text" ng-model="$ctrl.email" />
<input type="password" ng-model="$ctrl.password" />
<button type="button" ng-click="$ctrl.dismiss()">Cancel</button>
<button type="submit">Login</button>
</form>

Los documentos AngularJS 1.5 son un poco escasos, pero muestran el uso de & binding como un contenedor de funciones: https://docs.angularjs.org/guide/component