i am using angularjs 1.65 version
and its seems that $sce is getting me undefined
i have been trying serval times to get it fixed over 3 hours on it.
here is the module :
var app = angular.module('myApp', ['ui.router','ngclipboard','oitozero.ngSweetAlert']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {})
and here is the controller :
app.controller('monitormainController',
['$rootScope','$scope','$timeout','SweetAlert','$sce', function
($scope,$timeout,$rootScope,$watch,SweetAlert,$sce) {
$scope.copyset = function(name){ $scope.trustedHtml =
$sce.trustAsHtml(name); };
});
i am getting an error which says $sce is undefined
Failed to load resource: the server responded with a status of 404
(File not found) angular.js:14642 TypeError: Cannot read property
'trustAsHtml' of undefined
at Scope.$scope.copyset (monitormainController.js:93)
at fn (eval at compile (angular.js:15500), :4:153)
at callback (angular.js:27285)
at Scope.$eval (angular.js:18372)
at Scope.$apply (angular.js:18472)
at HTMLButtonElement. (angular.js:27290)
at HTMLButtonElement.dispatch (jquery.js:5095)
at HTMLButtonElement.elemData.handle (jquery.js:4766)
will be happy to get any answer thank you very much!
Your dependencies are in the wrong order here. You must match the order of the dependencies in the array exactly with the parameters in the function. Also, you are expecting $watch in your function, but not including it in the dependency list.
Edit: If you are intending to use $scope.$watch rather than a $watch service that you created or installed, that isn't an injectable service. Therefore, it should not be passed as a function parameter.
Instead of:
['$rootScope','$scope','$timeout','SweetAlert','$sce', function
($scope,$timeout,$rootScope,$watch,SweetAlert,$sce) {
Try:
['$rootScope','$scope','$timeout','SweetAlert','$sce', function
($rootScope,$scope, $timeout, SweetAlert, $sce) {
Related
I don't know why I am getting this error.
The error I am getting is Error: [ng:areq] Argument 'PreviewController' is not a function, got undefined.
Can someone help me out with this?
Also is there any other way to inject services in a controller?
My code is as follows:
(function() {
'use strict';
angular
.module('MyModule')
.controller('PreviewController' ['$scope','Service1','Service2',
function($scope, $http) {
$http.get("https://api.myjson.com/bins/30e2a")
.success(function(response) {
//Dummy data taken from JSON file
$scope.firstName = response.firstName;
$scope.lastName = response.lastName;
$scope.dateAdded = response.dateAdded;
});
//Functions have been defined. Functionality to be added.
$scope.cancelAndBack = function() {
window.history.back();
};
}]);
}());
You are defining you module incorrectly.
`angular.module('MyModule')`
Is looking for an already initialised module called 'MyModule'.
If you are creating a module from scratch you need to empty array. This would be more module dependencies.
`angular.module('MyModule', [])`
This is how angular knows the difference between, 'create an app' and 'get me an app'.
Finally services. Your using angulars array notation. That is so you can minify your javascript.
angularjs injection system works by name, that's how it can find the dependencies your require, that's also why you can list them in any order you like. However minifying your code changes your variable names and so breaks angular's injection.
The solution is to provide an array of strings telling angular the services you wish to inject and the order they are injected in.
So your array values and properties passed into your controller function must match.
Correct:
.controller('test', ["$scope", "$http", "myService", function( $scope, $http, myService){}]);
Incorrect: (myService won't be defined as its missing from the array)
.controller('test', ["$scope", "$http", function( $scope, $http, myService){}]);
UPDATE: ISSUE RESOLVED
Turns out I was not aware that the ngCookies was a separate service which is not part of the standard angular.js. My bower.json file was referencing angular 1.4beta but the angular-cookies was still loading 1.3. I changed that to 1.4beta and everything is working as expected.
I am using $cookies in a controller in an Angular 1.4 project but I am getting the following error when I reference $cookies:
TypeError: undefined is not a function
at Object.<anonymous> (http://localhost:9000/bower_components/angular-cookies/angular-cookies.js:60:16)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4371:17)
at Object.enforcedReturnValue [as $get] (http://localhost:9000/bower_components/angular/angular.js:4224:37)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4371:17)
at http://localhost:9000/bower_components/angular/angular.js:4189:37
at getService (http://localhost:9000/bower_components/angular/angular.js:4330:39)
at invoke (http://localhost:9000/bower_components/angular/angular.js:4362:13)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:4379:27)
at http://localhost:9000/bower_components/angular/angular.js:8668:28
at link (http://localhost:9000/bower_components/angular-route/angular-route.js:981:26) <div ng-view="" class="ng-scope">
My code:
angular.module('supportalApp', [
'ngCookies',
'ngAnimate',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'cfp.hotkeys',
'ngClipboard']);
angular.module('supportalApp')
.controller('ToolsCtrl', function($scope, $cookies) {....
});
If I remove $cookies, no errors are rendered. And just to confirm, I have included 'ngCookie' in the app
Note that the $cookies API used to be an associative array before AngularJS v1.4.0-beta.6, and the online documentation (defaulting to a development snapshot) already refers to the new get/put API. The relevant change is https://github.com/angular/angular.js/commit/38fbe3ee8370fc449b82d80df07b5c2ed2cd5fbe
With AngularJS <= v1.4.0-beta.5, you have the following choices:
Use $cookieProvider
$cookies["key"] = value
$cookies.key = value
(Upgrade AngularJS)
I don't see 'ngCookies' added in your module dependency, please add it.
angular.module('supportalApp', ['ngCookies'])
.controller('ToolsCtrl', function($scope, $cookies) {....
});
I'm trying to decorate a service with another method. The problem is that method uses $http which I can't inject into the angular.config block because it hasn't been initialised yet.
I thought I could get around this by using $injector as this would only run when the method I add gets called, but this results in the error:
Error: [$injector:unpr] Unknown provider: $http
Here's an example of what I am trying to do:
angular.module('someModule', [])
.config(($provide, $injector)->
$provide.decorator('someService', ($delegate)->
$delegate.newMethod = ()->
$http = $injector.get('$http')
$http.get('someURL')
return $delegate
)
)
Later on, only when I call someService.newMethod() do I get the error mentioned above.
Is there any way to do what I'm trying to do?
Apparently the $injector needs to be injected to the decorator as well, so this will fix it:
angular.module('someModule', [])
.config(($provide, $injector)->
$provide.decorator('someService', ($delegate, $injector)->
$delegate.newMethod = ()->
$http = $injector.get('$http')
$http.get('someURL')
return $delegate
)
)
When I try inject $http into an overridden factory I get the error:
Uncaught Error: [$injector:cdep] Circular dependency found: $http <-
$exceptionHandler <- $rootScope
AngularModule.factory('$exceptionHandler', function ($http) {
any ideas how to resolve? if I inject using [], $http is undefined
edit__________________
as per an answer below I tried:
MyModule.config(function($provide, $http) {
$provide.decorator("$exceptionHandler", function($delegate) {
return function(exception, cause) {..
but I still get the circular error:
Uncaught Error: [$injector:cdep] Circular dependency found: $http <-
$exceptionHandler <- $rootScope
Inject the $injector and then get the $http service from there. Something like this:
AngularModule.factory('$exceptionHandler', function ($injector) {
var $http = $injector.get("$http");
See https://groups.google.com/forum/#!topic/angular/lbFY_14ZtnU/discussion
However, this will completely override the $exceptionHandler functionality provided by Angular. If you just want to add the server-side log to the existing functionality, see this question about augmenting $exceptionHandler functionality.
I'm using this solution, because of circular dependency issues with rootScope:
angular
.module('facilityLog')
.provider('$exceptionHandler', function() {
"use strict";
this.$get = function($injector) {
function exceptionHandler(exception, cause) {
// This is the part where you get the instance of $http in your case
var $rootScope = $injector.get('$rootScope');
//...
}
return exceptionHandler;
}});
So if you request the instance inside the exceptionHandler-Function you will not get the circular dependency-error.
I used the following to solve this. Note how the array notation is used to make this minification safe.
Note also, that I am completely overriding the $esceptionHandler and using my own service to replace it.
angular
.module('app')
.factory('$exceptionHandler', $exceptionHandler);
$exceptionHandler.$inject = ['$injector', 'exceptionLoggingService'];
function $exceptionHandler($injector, exceptionLoggingService)
{
return function(exception, cause)
{
exceptionLoggingService.http = exceptionLoggingService.http || $injector.get('$http');
exceptionLoggingService.error(exception, cause);
};
}
Im having problem with injections.
app.js
angular.module('Help', []);
var app = angular.module('app', [
'restangular'
,'Help'
]);
app.$inject = ['RestangularProvider'];
app.config(
function(RestangularProvider) {
RestangularProvider.setBaseUrl('http://localhost:8080/api');
}
)
help.js
function HelpCtrl($rootScope, $scope, Restangular){
Restangular.one('questions').getList();
}
HelpCtrl.$inject = ['$scope', '$rootScope','Restangular']; //"TAG1"
angular.module('Help').controller("HelpCtrl", HelpCtrl);
I get the following error:
Uncaught TypeError: Object [object Object] has no method 'one'
If I remove line TAG1, everything works. However I need to inject it the right way. What is the problem here?
The injector is used to help AngularJS know the order of parameters given to the function in case the variable name change (e.g. after minimizing your JavaScript).
In your case, you've switched up the order of your injector parameters and the method signature, meaning that AngularJS will think that $scope is $rootScope and vice versa.
Either remove your $inject or make sure the parameters are in the same order in both your method signature and in your injection array.