when i try to invoke openDialog function form view i get the following error
ngDialog.open is not a function
here is my code
(function () {
'use strict';
angular
.module('app.user')
.controller('userController', Controller);
Controller.$inject = ['$rootScope', '$log', 'ngDialog', 'tpl','DataService'];
function Controller($rootScope, $log,ngDialog,tpl, DataService) {
var vm = this;
vm.user = {};
vm.createUser = function() {
DataService.createUser(user);
}
vm.openDialog = function() {
$log.log('vm.openDialog is running')
ngDialog.open({
template: 'createUser',
className: 'ngdialog-theme-default'
})
}
activate();
function activate() {
}
}
})();
so what might be problem?
thank you .
See fully working demo over here.
You forgot to add .module('app.user',['ngDialog'])
ngDialog.open(
{
template: 'createUser',
className: 'ngdialog-theme-default'
});
http://plnkr.co/edit/dpbE6lgQDxJYZYOXqU6j?p=preview
Try this
function Controller($rootScope, $log, ngDialog ,tpl, DataService) {
var vm = this;
vm.user = {};
vm.createUser = function() {
DataService.createUser(user);
}
ngDialog.open = function() {
$log.log('vm.openDialog is running')
ngDialog.open({
template: 'createUser',
className: 'ngdialog-theme-default'
})
}
activate();
Related
I would like to use one controller inside another one. I have found that I could use angular service $controller.
This is what I have tried:
.controller(
'UnplannedTasksController',
[
'$location',
'$uibModal',
'$controller',
'unplannedTasksService',
'messages',
function($location, $uibModal, $controller, unplannedTasksService, messages) {
var ctrl = this;
var modalInstanceCtrl = $controller('ModalInstanceCtrl');
this.openModal = function(unplannedTask) {
var modalInstance = $uibModal.open({
animation: false,
templateUrl: 'unplanned-tasks/unplanned-tasks-modal.html',
controller: modalInstanceCtrl,
controllerAs: 'mdCtrl',
size: 'lm',
resolve: {
object: function() {
return unplannedTask;
},
title: function() {
return messages.unplannedTasks.deleteTitle;
},
question: function() {
return messages.unplannedTasks.deleteQuestion + unplannedTask.partner.name;
}
}
});
modalInstance.result.then(function(unplannedTask) {
ctrl.display.getUnplannedTasksBusyPromise = unplannedTasksService.removeUnplannedTask(unplannedTask.id).then(function(data) {
ctrl.searchUnplannedTasks();
});
});
};
}])
This ModalInstanceCtrl is in another file and look like this:
.controller('ModalInstanceCtrl', function($modalInstance, object, title, question) {
var ctrl = this;
this.object = object;
this.title = title;
this.question = question;
this.ok = function() {
$modalInstance.close(ctrl.object);
};
this.cancel = function() {
$modalInstance.dismiss('cancel');
};
})
But I am getting an error:
"Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- ModalInstanceCtrl ..."
Could you please advise. Thank you.
[EDIT]
Anyone? Please ...
Best regards,
mismas
According to the Angular-UI documentation, you do not need to use $controller. You just have to tell the controller name the the $uibModal service, as a simple string.
In your case:
var modalInstance = $uibModal.open({
controller: 'modalInstanceCtrl'
// + more params
});
I have this code inside a controller. I'm using it to open an angularJS Bootstrap modal with another controller attached.
Is there a way I can not use $scope for the ok() and cancel() functions here?
$scope.deleteTest = (test: ITest) => {
var self = this;
var modalInstance = $modal.open({
templateUrl: '/app/tests/partials/deleteTest.html',
controller: ['$scope', '$modalInstance', 'testService',
function ($scope, $modalInstance, testService: ITestService) {
$scope.ok = () => {
var self = this;
testService.deleteTest()
.then(
() => {
$modalInstance.close();
});
};
$scope.cancel = () => {
$modalInstance.dismiss('cancel');
};
}],
});
}
Looks like you are using TypeScript so you can do something like this
var modalInstance = $modal.open({
templateUrl: '/app/tests/partials/deleteTest.html',
controller: DeleteTest,
controllerAs: 'ctrl'
});
//...
class DeleteTest {
static $inject = ['$modalInstance', 'testService'];
constructor(private $modalInstance, private testService: ITestService) {
}
ok() {
this.testService.deleteTest().then(() => this.$modalInstance.close());
}
cancel() {
this.$modalInstance.dismiss('cancel');
}
}
In deleteTest.html you could call the ok() method with something like
<button ng-click="ctrl.ok()">Ok</button>
I would like to call dialog's controller function on $modal.rendered event, is this doable without polluting $scope?
Here is a sample Plunkr:
http://plnkr.co/edit/HzFe65RY3hNme8QuUWaJ?p=preview
So, in promise:
modalDialog.rendered.then(function () {
demo.message = 'Dialog opened';
});
I would like to call onLoaded function from modalController controller.
Thank you, best regards,
You can use a factory/service to share data & functions across controllers;
angular.module('app', ['ui.bootstrap'])
.controller('demoController',['$modal', 'modalService', function($modal, service) {
var demo = this;
demo.message = 'It works!'
demo.modal = function() {
var modalDialog = $modal.open({
controller: 'modalController',
controllerAs: 'modal',
templateUrl: 'modal.html'
});
modalDialog.rendered.then(function () {
demo.message = 'Dialog opened';
service.onLoaded();
});
};
}])
.controller('modalController', ['$modalInstance', 'modalService', function($modalInstance, service) {
var modal = this;
service.modalText = 'Modal Text';
modal.shared = service;
modal.cancel = function() {
$modalInstance.dismiss();
}
}])
.factory('modalService', function() {
var service = {
modalText: 'Modal text',
onLoaded: onLoaded
};
return service;
function onLoaded() {
service.modalText = 'Modal loaded';
}
})
And the following update to the html;
<div class="modal-body">
<pre>{{ modal.shared.modalText }}</pre>
</div>
Updated plunker: http://plnkr.co/edit/q704IjkHSAYwuCfLuYnU?p=preview
I have a $scope.selected ( a modal that return a value selected ) to be created in ModalInstanceCtrl controller and used in displayValue controller,How Can I spent the first controller value at the second,
app
.controller('DemoCtrl', function ($scope, $modal) {
console.log("in angular");
$scope.selected = null;
$scope.open = function() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'lg'
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
});
};
})
.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.setSelectedSegment = function (value) {
$scope.selected = value;
$modalInstance.close($scope.selected);
};
})
.controller('displaySelected', function ($scope) {
// get selected from ModalInstanceCtrl controller
$scope.displayValue= $scope.selected;
};
})
You need to create angularjs service for this purpose and then include the service where you need to access its value.
var app = angular.module("MyApp", []);
app.factory("UserService", function() {
var users = ["Peter", "Daniel", "Nina"];
return {
all: function() {
return users;
},
first: function() {
return users[0];
}
};
});
app.controller("MyCtrl", function($scope, UserService) {
$scope.users = UserService.all();
});
app.controller("AnotherCtrl", function($scope, UserService) {
$scope.firstUser = UserService.first();
});
I'm trying to pass a value to the Popup Controller, but is only passing if i insert this "havePermissions" in the controller but gives this error https://docs.angularjs.org/error/$injector/unpr?p0=havePermissionsProvider (Unknown provider: havePermissionsProvider)
if i remove this "havePermissions, i dont have the error, but dont pass the value to the modal controller (is undefined the value)
Modal Open
$scope.open = function (size) {
var modalScope = $rootScope.$new();
modalScope.modalInstance = $modal.open({
templateUrl: 'Views/Common/participants.html',
controller: 'ModalInstanceCtrlPartic',
size: size,
scope: modalScope,
resolve: {
havePermissions: function () {
return $scope.havePermissions;
}
}
});
modalScope.modalInstance.result.then(function () {
});
};
Modal Controller
angular.module("participants.controller", ['ui.bootstrap'])
.controller("ModalInstanceCtrlPartic", ["$scope", "$http", "$location",
"$routeParams", "UserService","havePermissions","logger",
function ($scope, $http, $location, $routeParams, UserService,
havePermissions,logger) {
var page = $location.path().split('/')[1];
$scope.havePermissions = havePermissions;
$scope.ID_Event = page == "events" ? $routeParams.eventId : null;
$scope.ID_UserGroup = page == "groups" ? $routeParams.groupId : null;
$scope.page = page;
$scope.model = {};
UserService.GetParticipants($routeParams.groupId, $routeParams.eventId).then(function (response) {
$scope.model = response.data;
}, function (e) {
logger.logError("Ocorreu um erro, tente novamente.!");
});
$scope.emailList = [];
$scope.ok = function (list) {
//envia email
$scope.modalInstance.close('');
};
$scope.cancel = function () {
$scope.modalInstance.close('');
};
}]);
$modal.open method should not go inside the newly created scope.
Keep var modalInstance = $modal.open({//init code})
Modal code will be changed as follows.
$scope.open = function (size) {
var modalScope = $rootScope.$new();
var modalInstance = $modal.open({
templateUrl: 'Views/Common/participants.html',
controller: 'ModalInstanceCtrlPartic',
size: size,
scope: modalScope ,
resolve: {
havePermissions: function () {
return $scope.havePermissions;
}
}
});
modalInstance.result.then(function () {
});
};
Here is updated plunkr not exactly the same.
Hope this is helpful to you.