Use $compileProvider to avoid unsafe links - javascript

I have no trouble injecting things like $scope and $location and $routeProvider, why is $compileProvider different?
Based on this answer, I understand that I have to instruct angular to not prefix certain links (sms in my case), but I can't apply the answer in my project. It says I should add this:
angular.module('myModule', [], function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);
});
But the chrome console says:
"angular.js:68 Uncaught Error: [$injector:unpr] Unknown provider:
$compileProviderProvider <- $compileProvider"
That "provider-provider" thing made me think that the real name of the service is just $compile (and that angular is tacking on the "provider" suffix:
angular.module('myModule', [], function ($compile) {
$compile.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);
});
But then, predictably, I guess, I get:
angular.js:13550 TypeError: $compile.aHrefSanitizationWhitelist is not a function

That's because you have to add it as a config:
angular.module('myModule').config(['$compileProvider',
function($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);
}
]);

Related

Angular Selection Model injector error

I added the 'selectionModel' to my TestRateCtrl controller but I get an error:
angular.module('RDash', ['selectionModel'])
.controller('TestRateCtrl', function() {
I get this error:
Error: [$controller:ctrlreg] http://errors.angularjs.org/1.5.11/$controller/ctrlreg?p0=MasterCtrl
MasterCtrl is my master.js file. If I add 'selectionModel' to my master.js I get a different error.
angular.module('RDash', ['selectionModel'])
.controller('MasterCtrl', ['$rootScope', '$scope', 'configService', '$cookieStore', MasterCtrl]);
Now I get this error:
Error: [$injector:unpr] http://errors.angularjs.org/1.5.11/$injector/unpr?p0=%24cookieStoreProvider%20%3C-%20%24cookieStore%20%3C-%20MasterCtrl
I have the following in my index.html file:
src="components/angular-selection-model/dist/selection-model.js" charset="utf-8">
src="components/angular-selection-model/dist/selection-model.min.js" charset="utf-8">
By doing this would make two different scopes for your application becuase using same name of module if you reinitiallized that module that would be different that the other one which is already declared
say: file A
angular.module("RDash", ['selectionModel']);
This is defined and in file B
var app = angular.module("RDash", ['selectionModel']);
so this would cause to have two different app with same name in one application and that two app with same name in different files so its something like to have two different angular module inside on application.
so,
Replace this
angular.module('RDash', ['selectionModel']) .controller('TestRateCtrl', function() {
by
angular.module('RDash') .controller('TestRateCtrl', function() {
Same thing is happening here again
And here you are creating a MasterCtrl and adding MasterCtrl as dependencies
Replace this
angular.module('RDash', ['selectionModel']) .controller('MasterCtrl', ['$rootScope', '$scope', 'configService', '$cookieStore', MasterCtrl]);
by
angular.module('RDash') .controller('MasterCtrl', ['$rootScope', '$scope', 'configService', '$cookieStore']);
If anyone else is using the RDash framework (from startangular.com), and wants to use the angular-selection-model library, the way I was able to add the 'selectionModel' to the RDash framework is in the modules.js file as follows:
angular.module('RDash', ['ui.bootstrap', 'ui.router', 'ngCookies', 'selectionModel']);

custom blur not working correctly [AngularJS]

I am trying to create notifications something like this:
http://plnkr.co/edit/GbFioFDNb2OC4ZjARQTp?p=preview
But I am unsuccesful to integrade it in my script, because when I click outside notification box nothing happend.
Here is my script:
'use strict';
var app = angular.module('notifications',['ngRoute'], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
})
.controller('NotificationController', function($scope, $http) {
$http.get("/api/notification")
.success(function (response) {
$scope.notys = response;
});
$scope.notifications = {
visible: false
};
$scope.showNotifications = function(flag) {
$scope.notifications.visible = flag;
};
})
.directive('customBlur', function(){
return {
restrict: 'A',
scope: {
'customBlur': '='
},
link: function(scope, element, attr) {
element.on('click', function(event){
var targetAttr = angular.element(event.target).attr('custom-blur');
console.log(targetAttr);
if (typeof targetAttr !== 'undefined') {
scope.$apply(function(){
scope.customBlur = false;
});
}
});
}
};
});
Problem is when I click outside notifcation box it not return anything but shuld return notification.visible if I click into notification box it return undefined as expected.
that is result for: console.log(targetAttr);
I ran your code in plunkr and tried to fix the error.
All I found is that your module name and controller name were not same.
Uncaught Error: [$injector:modulerr] Failed to instantiate module demo due to:
Error: [$injector:nomod] Module 'demo' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.2/$injector/nomod?p0=demo
This error says that angular is not able to find the module 'demo'. So I made changes to HTML here. This line:
<html ng-app="notifications">
After that I got this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module notifications due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
This says that ngRoute which you are using here angular.module('notifications',['ngRoute'], function($interpolateProvider) { is not available. So I just removed it. (just to fix the error.).So I did changes to js. This line:
angular.module('notifications',[], function($interpolateProvider) {
ok After that I got this error:
Error: [ng:areq] Argument 'Ctrl' is not a function, got undefined
http://errors.angularjs.org/1.4.2/ng/areq?p0=Ctrl&p1=not%20a%20function%2C%20got%20undefined
Which says that Ctrl is not defined properly.So I made changes to HTML again.This line
<body ng-controller="NotificationController">
ok. After fixing all this I found no more error. and your plunker started working again.
you can see the plunker here : plunker
Hope this helps you. Thank you.

Angular code mangled causes "Unknown Provider" message

I want to mangle my AngularJS file, and it works for almost the whole part. However, when I click through the app and navigate to the only part that uses ngLazyBind and angular-history, I get the following issue: Error: [$injector:unpr] Unknown provider: aProvider <- a <- $lazyBind .
I am using ngMin in hopes that this kind of stuff wouldn't happen. When I set uglify's mangled property to false, this issue goes away.
Another little note - injecting $lazyBind into a controller is what causes the error. I can include lazyBind in the app without issue, but when I inject $lazyBind into a controller the error arises.
The reason I mention angular-history is if I completely eliminate lazyBind, the exact same error appears with Error: [$injector:unpr] Unknown provider: mProvider <- m <- History.
It doesn't look like the 2 libraries are minification-safe...
In angular-history line 88...
angular.module('decipher.history', ['lazyBind']).service('History',
function ($parse, $rootScope, $interpolate, $lazyBind, $timeout, $log,
From the error message, it looks like $parse was renamed to m and angular wasn't able to resolve it.
Same thing with ngLazyBind line 89...
app.factory("$lazyBind", lazyBindProvider);

AngularJS Error: Unknown provider: aProvider <- a

OK I'm officially bald now, after having been streching my hair out with this infamous problem: The minfied AngularJS app just doesn't work, with this error thown out:
Error: [$injector:unpr] Unknown provider: aProvider <- a
http://errors.angularjs.org/1.2.6/$injector/unpr?p0=aProvider%20%3C-%20a
at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:11492
at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26946
at Object.c [as get] (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26250)
at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:27041
at c (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26250)
at Object.d [as invoke] (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26496)
at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:9:910
at Object.f [as forEach] (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:11927)
at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:9:856
at j (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:5:27235)
Lots of other people had this problem as well, but looks like it could be fixed by declaring dependencies as an array instead of bare function parameters, like this:
angular.module('my-app').controller('LoginCtrl', [ '$scope', 'HttpService', function($scope, HttpService) { ... }]);
instead of this:
angular.module('my-app').controller('LoginCtrl', function($scope, HttpService) { ... });
But it doesn't work in my case. I checked all of my scripts (coffee and generated javascripts as well), they all use the proper array-style declaration.
The problem doesn't come from extra packages apparently. I tried moving all extra package references out of <!-- bower:js --> block (so that they are not minified by grunt), yet the problem still remains. Which means, it's my code to blame... But then again, I've tried the (seems to be) only fix available, to no avail.
Any hint, even on how to properly debug this?
Thanks in advance!
Finally I've found the problem. And yes, it's a DI bug which I missed.
To all who may be suffering from the same headache: array-format declaration must be done in $routeProvider's resolve options as well. In my case (CoffeeScript ahead):
app.config (['$routeProvider', ($routeProvider) ->
$routeProvider
.when '/',
templateUrl: 'views/main.html'
controller: 'MainCtrl'
resolve:
groups: ['GroupService', (GroupService) -> # I MISSED THIS
return GroupService.getAll()
]
entries: ['EntryService', (EntryService) -> # AND THIS
return EntryService.getAll()
]
# ...
])
Hope this helps!
This behaviour could come if you use implicit injection, instead of explicit declaring your dependencies. In my experience I faced this kind of problem with particular kind of Angular.js services that return instantiable class (for example to create abstract controller Classes or some other particular cases).
For example: AbstractBaseControllerClass
During minification I had the same problem. I solved using internal declaration of dependency injection.
Hope this helps
For the ones that doesn't like CoffeeScript.
I just took some of my code and put it in.
$stateProvider
.state('screen', {
url: '/user/',
templateUrl: 'user.html',
controller: 'UserController',
controllerAs: 'user',
location: "User",
resolve: ['$q', 'UserService', '$state', '$timeout', authenticateUser
]
})
function authenticateUser($q, UserService, $state, $timeout) {
UserService.getLoginStatus().then(function () {
if (UserService.user) {
console.log("is user");
return $q.when();
} else {
console.log("not user");
$timeout(function () {
// This code runs after the authentication promise has been rejected.
// Go to the log-in page
$state.go('login')
});
return $q.reject()
}
});
}

Unknown provider: $resourceProvider <- $resource with AngularJS

I have declared the following in app.js
angular.module('adminApp', ['ngGrid','ngResource']);
in data.js
angular.module('adminApp', [])
.factory('testAccountService', function ($http) {
var TestAccount = {
in GridCtrl.js
angular.module('adminApp',[])
.controller('GridCtrl', function ($scope, $http, $resource, testAccountService) {
$scope.selectedTestAccount = null;
I am loading my scripts like this:
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-resource.min.js"></script>
<script src="~/App/admin/services/Data.js"></script>
<script src="~/App/admin/controllers/GridCtrl.js"></script>
When I run this it gives me an error saying:
Error: Unknown provider: $resourceProvider <- $resource
at Error (<anonymous>)
at http://127.0.0.1:81/Scripts/angular.js:2682:15
at Object.getService [as get] (http://127.0.0.1:81/Scripts/angular.js:2810:39)
at http://127.0.0.1:81/Scripts/angular.js:2687:45
Is there something wrong with the way I am doing this. I am confused about how to set up the service but I can't see what's wrong:
$resource is not part of AngularJS Core.
You have to include: angular-resource.js.
From the docs:
To use $resource make sure you have included the angular-resource.js that comes in Angular package. You can also find this file on Google CDN, bower as well as at code.angularjs.org.
In your data.js and GridCtrl.js, you need to remove the [] from the angular.module('adminApp', []) call.
Like so: angular.module('adminApp')
Also, make sure your app.js is loaded first.
you would also need to include angular resource module definition 'ngResource' on your module defintion angular.module('adminApp', ['ngResource'])

Categories