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'],
Related
I want to test my Angular component which is syntactically based on John Papa's styleguide:
'use strict';
angular.module('MyModule')
.component('MyCmpnt', MyCmpnt())
.controller('MyCtrl', MyCtrl);
function MyCmpnt() {
return {
restrict: 'E',
templateUrl: 'myPath/myTemplate.html',
bindings: {
foo: '=',
bar: '<'
},
controller: 'MyCtrl',
controllerAs: 'vm'
};
}
MyCtrl.$inject = ['MyService'];
function MyCtrl (MyService) {
// controller logic
}
As you can see I want to inject MyService into the controller and spy in a function on that very service.
My test code:
'use strict';
describe('component: MyCmpnt', function () {
var $componentController,
MyService;
beforeEach(module('MyModule'));
beforeEach(module(function ($provide) {
$provide.value('MyService', MyService);
spyOn(MyService, 'serviceFunc').and.callThrough();
}));
beforeEach(inject(function (_$componentController_) {
$componentController = _$componentController_;
}));
it('should initiate the component and define bindings', function () {
var bindings = {
foo: 'baz',
bar: []
};
var ctrl = $componentController('MyCmpnt', null, bindings);
expect(ctrl.foo).toBeDefined();
});
});
However, this setup lets me run into the following error:
TypeError: undefined is not a constructor (evaluating '$componentController('MyModule', null, bindings)')
The code above has $componentController('MyModule'..., and there is no MyModule component.
MyService variable is undefined when spyOn(MyService... is called. This will throw an error prevent the application from being bootstrapped correctly.
If testing rig uses PhantomJS, this may lead to error suppression in beforeEach blocks, for correct error reporting Chrome Karma launcher is recommended.
If the problem is that MyService is undefined at the point where mocked service is defined, it can be defined in-place as a stub:
beforeEach(module(function ($provide) {
$provide.value('MyService', {
serviceFunc: jasmine.createSpy().and.callThrough()
});
}));
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.
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.
I have an AngularJS factory which I am attempting to use to create modals. However, when I attempt to use the resolve method in the $modal my modal instance controller gets an unresolved provider.
Here is how I am calling my factory from my controller:
var modalOptions = {
template: 'app/common/modalwindow.html',
data: data
};
modalFactory.openModal(modalOptions);
My modal factory is simple for now, all it has is a single open modal method:
(function() {
'use strict';
var factoryId = 'modalFactory';
angular.module('app').factory(factoryId, ['$modal', modalFactory]);
function modalFactory($modal) {
var factory = {
openModal: openModal
}
return factory;
function openModal(data) {
$modal.open({
templateUrl: data.template,
controller: 'modalInstanceCtrl',
resolve: {
modalData: function () {
return data.data;
}
}
});
}
}
})();
However, when my modalInstanceCtrl is called it throws an error. Here is my modalInstanceCtrl
(function () {
'use strict';
var controllerId = 'modalInstanceCtrl';
angular.module('app').controller(controllerId, ['common', 'modalData', modalInstanceCtrl]);
function modalInstanceCtrl(common, modalData) {
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
log(modalData);
};
})();
The error it throws is:
Unknown provider: modalDataProvider <- modalData <- modalInstanceCtrl
I thought the resolve in the $modal would handle this injection. Am I assuming wrong here?
Before voting this down, yes this question has been asked here already, and answered, but the answers are not satisfactory. They all correctly suggest to add the controller in the route configuration, but this is not the case here.
The expected behavior for the routeProvider's resolve object xxx is to be injected into the controller:
var app = angular.module('X', [])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/',{
controller:'XCtrl',
templateUrl: 'x.html',
resolve: {
xxx: function () {
return 'XXX from routing config.';
}
}
})
}])
.controller('XCtrl', function($scope, xxx) {
console.log('xxx = '+xxx);
});
The console should get a xxx = XXX from routing config. entry.
Instead, the code extract above fails with:
Error: [$injector:unpr] Unknown provider: xxxProvider <- xxx
http://errors.angularjs.org/1.2.10/$injector/unpr?p0=xxxProvider%20%3C-%20xxx
.. etc.
XCtrl is not declared in the HTML with a ng-controller directive but only defined in the routing configuration.
If you have several entry in the routing configuration using the same controller, all properties that are injected in the controller must appear in all instances of the resolve object:
var app = angular.module('X', [])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/',{
controller:'XCtrl',
templateUrl: 'x.html',
resolve: {
xxx: function () {
return 'XXX from routing config.';
}
another: // ...
}
})
.when('/page2',{
controller:'XCtrl',
templateUrl: 'x/p2.html',
resolve: {
xxx: function () {
return 'XXX from routing config.';
}
}
})
}])
.controller('XCtrl', function($scope, xxx) {
console.log('xxx = '+xxx);
});
The resolve objects don't have to be promises, straight data returning from a function as above also works. Promises are useful to prevent the routing if one of them is rejected.