I have an Angular 1.2 project, and I have a controller which I want to replace using Component. This new component is open from uibModal and it contains another directive.
Before changing it to a component, everthing was fine, but after I changed it I get an error: Unknown provider: $uibModalInstanceProvider
First component:
$ctrl.openImportModal = function () {
var modalInstance = $uibModal.open({
templateUrl: 'forecastDataNew/modals/importStaffingPlanJobModal/importStaffingPlanJobModal.tpl.html',
component: 'importStaffingPlanJobModalCtrl',
windowTopClass: 'import-forecast-data-modal',
size: 'sm',
backdrop: 'static'
});
...
Second component (which throws the error when I change a component to a controller):
angular.module('nice.saas.wfm.importStaffingJob')
.component('importStaffingPlanJobModalCtrl', {
templateUrl: 'forecastDataNew/importStaffingPlanJobs.tpl.html',
bindings: { },
controller: function($q, $scope, $log, $uibModalInstance, Utils, ForecastDataService) {
'use strict';
$scope.filePicked = false;
$scope.file = { };
$scope.isClicked = true;
$scope.uploadCsvAndSave = function(file) {
This component includes its HTML directive — if I remove that directive, no error occurs.
angular.module('nice.saas.wfm.importStaffingJob',['firebase', 'ui.bootstrap'])
Try with this module definition.
Related
In my angular app, I have a pretty standard <navbar> component.
This component is to be used inside the template on the following state that I've defined using ui-router:
$stateProvider
.state('proverbs', {
abstract: true,
url: '/proverbs/:lang',
template: '<navbar></navbar><div ui-view class="absolute full-sized anim-in-out" data-anim-speed="444" data-anim-sync="false"/></div>',
resolve: {
proverbs: ['$stateParams', '$q', 'dataFactory', function ($stateParams, $q, dataFactory) {
let deferred = $q.defer();
let url = CONFIG.api + '/proverbs/' + $stateParams.lang;
dataFactory.getData(url).then(function (data) {
deferred.resolve(data);
});
return deferred.promise;
}]
}
})
As you can see I've set a resolve property to be able to share async data with this state and all its child states.
However, the component <navbar> doesn't know what proverbs is when it gets initialized:
(function() {
'use strict';
angular
.module('proverbial')
.component('navbar', {
templateUrl:'scripts/components/navbar/navbar.template.html',
controller: NavbarController,
bindings: {
Binding: '=',
},
});
NavbarController.$inject = [ '$stateParams', '$scope', 'language', 'proverbs', 'CONFIG' ];
function NavbarController( $stateParams, $scope, language, proverbs, CONFIG ) { };
})();
And I get the following error when accessing the state:
Error: [$injector:unpr] Unknown provider: proverbsProvider <- proverbs
How can I access this proverbs data within my navbar component without calling dataFactory again?
I am having issues to use SweetAlert from component,
I tried to load it from parent and its all works bug not on component.
The error :
Error: [$injector:unpr] Unknown provider: SweetAlertProvider <- SweetAlert
My code is:
(function () {
'use strict';
angular.module("app.my.component", [])
.component("myCard", {
templateUrl: "app/views/my.card.template.html",
bindings: {
},
controller: ComponentController
});
ComponentController.$inject = ['fetchComponentService','SweetAlert'];
function ComponentController(fetchComponentService,SweetAlert) {
var vm = this;
Find the issue, I didn't require it on navigate from parent that calling it :
require: ['oitozero.ngSweetAlert'],
i need to pass an object to modal controller , i have tried different approach , here is my final code , the object is passed but i get big error in console
Error: [$injector:unpr]
here is my code
vm.openAttendeesModal = function (meeting) {
var modalInstance = $modal.open({
templateUrl: '/App/Main/views/meetings/AttendeesModal.cshtml',
controller: 'attendeeController',
resolve: {
meetingSelected: function () { return meeting }
}
});
}
and here is my modal controller
angular
.module('App')
.controller('attendeeController', attendeeController);
attendeeController.$inject = ['meetingSelected', '$scope', '$modal', 'meetingService'];
function attendeeController(meetingSelected,$scope, $modalInstance, meetingService) {
/* jshint validthis:true */
var vm = this;
vm.meetingSelected = meetingSelected;
and here is complete error
angular.js:12520 Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=meetingSelectedProvider%20%3C-%20meetingSelected%20%3C-%20attendeeController
at Error (native)
the funny part is everything is working , even i have access to passed object , but i just feel something is wrong because of that fat error.
any suggestion ?
thanks
try this
var modalInstance = $modal.open({
templateUrl: '/App/Main/views/meetings/AttendeesModal.cshtml',
controller: 'attendeeController as ctrl',
resolve: {
meetingSelected: function () { return meeting }
}
});
or add controllerAs: "ctrl"
Edit:
if you add "attendeeController as ctrl" in AttendeesModal.cshtml remove it.
Using Angular.js UI bootstrap modal, how can I pass data into a modal popup's controller? I am currently trying:
var modalInstance = $modal.open({
templateUrl: 'partials/confirmation-modal.html',
controller: 'confirmationModal',
resolve: {
foo: function() { return 'bar'; }
},
backdrop: 'static',
keyboard: true
});
The controller confirmationModal is:
(function(_name) {
/**
* #ngInject
*/
function _controller($scope, foo) {
console.log(foo);
}
angular
.module('myApp')
.controller(_name, _controller);
})('confirmationModal');
But this errors with:
Unknown provider: fooProvider
You can try to define the "confirmationModal" controller with angular.module('app').controller(...) instead.
If you want to use a string to refer to a controller, you need to register it to an angular module.
So, you have two ways to make it work:
1.Use string
In modal settings:
controller: "confirmationModal"
In controller definition (assume "app" is your module name):
angular.module('app').controller("confirmationModal", function($scope, foo) {
console.log(foo);
});
2.Use function itself
In modal settings:
controller: confirmationModal
In controller definition:
var confirmationModal = function($scope, foo) {
console.log(foo);
}
Can you tell the difference?
I'm trying to to use the Angular UI Bootstrap module, in specific the Modal plugin.
My app-folder is structured in this way:
app
scheda
scheda.html
schedacontroller.js
app.js
css
...
index.html
This is app.js, the main app file:
// created the module GasistaFelice
// also included ngRoute for all our routing needs
angular.module('ngGasistaFelice', [])
.run(function($rootScope) {
$rootScope.gasID = "10"; //default value
});
angular.module('ngGasistaFelice', ['ui.bootstrap']);
var GasistaFelice = angular.module('ngGasistaFelice', ['ngRoute']);
GasistaFelice.config(['$routeProvider',function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'app/ordinare/ordinare.html',
controller : 'orderController'
})
// route for the paniere page
.when('/:id/gasmember/:id/basket', {
templateUrl : 'app/paniere/paniere.html',
controller : 'paniereController'
})
// route for the scheda page
.when('/:id/profile', {
templateUrl : 'app/scheda/scheda.html',
controller : 'schedaController'
})
// route for the conto page
.when('/:id/gasmember/:id/cash', {
templateUrl : 'app/conto/conto.html',
controller : 'contoController'
})
.otherwise({
redirectTo: '/'
});
}]);
exc....
This is the controller of the page in which i want to put the Modal plugin:
var app = angular.module('ngGasistaFelice', ['ui.bootstrap']);
app.controller('schedaController', function ($scope, $routeParams, $modal, $log, $http) {
var id = $routeParams.id;
// --- URL finale ---
//var url = 'http://localhost:8000/gasistafelice/api/v1/person/id/?format=json';
//URL di prova
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
When i load the page containing the schedaController, i keep getting this error:
Error: [$injector:unpr] h ttp://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24routeParamsProvider%20%3C-%20%24routeParams
at Error (native)
at http://localhost/GasistaFelice2_angular/js/angular.min.js:6:450
at http://localhost/GasistaFelice2_angular/js/angular.min.js:35:431
at Object.c [as get] (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:13)
at http://localhost/GasistaFelice2_angular/js/angular.min.js:35:499
at c (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:13)
at d (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:230)
at Object.instantiate (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:394)
at http://localhost/GasistaFelice2_angular/js/angular.min.js:66:112
at http://localhost/GasistaFelice2_angular/js/angular.min.js:53:14
Thank you
You're defining angular.module('ngGasistaFelice', []) multiple times with different required modules (inside of the second parameter to the module function):
angular.module('ngGasistaFelice', [])
angular.module('ngGasistaFelice', ['ui.bootstrap']);
var GasistaFelice = angular.module('ngGasistaFelice', ['ngRoute']);
var app = angular.module('ngGasistaFelice', ['ui.bootstrap']);
...specifically, the last one is the one you're trying to use ngRoute with, and you haven't even injected it there.
A better solution is to define it once, say:
var GasistaFelice = angular.module('ngGasistaFelice', [
'ui.bootstrap',
'ngRoute'
]);
And then you could do what you were trying to do:
GasistaFelice.controller(...);
Or, if you need this in another file (or scope) and GasistaFelice is not yet defined, you can get it by calling angular.module without passing the required dependencies, like:
var app = angular.module('ngGaistaFelice');
app.controller(...);
Since version 0.14.0 angular team prefixed all components you have to use, look more. For your case you need
Change: $modal for $uibModal.
Change: $modalInstance for $uibModalInstance.
Change: modal-transclude for uib-modal-transclude