custom blur not working correctly [AngularJS] - javascript

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.

Related

ocLazyLoad and angular.bootstrap

I want to add a ocLazyLoad in my mean-stack website. Here is the code:
.state('kpi', {
url:'/kpi',
templateUrl: '/htmls/kpi.html',
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load('/javascripts/kpi-controller.js').then(function () {
console.log("done");
}, function (e) {
console.log("error")
})
}]
}}
Loading the kpi page returns
bootstrapped
kpi-controller inside
done
Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?p0=KpiCtrl&p1=not%20aNaNunction%2C%20got%20undefined
where the error is about Error: ng:areq Bad Argument Argument 'KpiCtrl' is not a.
KpiCtrl is defined in kpi-controller.js, and printing kpi-controller inside in the console shows the file has been indeed loaded. But why KpiCtrl is still not recognized?
One thing special about my code is, in the beginning of the program, I have
jQuery(document).ready(function () {
angular.bootstrap(document, ['myweb'])
console.log("bootstrapped");
})
app = angular.module('myweb', ['ui.router', 'oc.lazyLoad']);
I did not understand angular.bootstrap well, but it seems that the new loaded KpiCtrl should be bootstrapped to be recognized. I tried to add angular.bootstrap(document, ['myweb']) inside ocLazyLoad, but it showed App already bootstrapped with this element 'document'.
Does anyone know how to solve this?

Use $compileProvider to avoid unsafe links

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):/);
}
]);

Angular + Karma/Jasmine: Error: [$injector:nomod] Module 'md.data.table' is not available

I am using Karma and Jasmine to test my Angular application.
I have this spec below:
"use strict";
describe("SuperHeroService", function () {
var SuperHeroService, $httpBackend;
beforeEach(module('beAwesome'));
beforeEach(module("beASuperHero"));
beforeEach(function () {
inject(function (_SuperHeroService_, _$httpBackend_) {
SuperHeroService = _SuperHeroService_;
$httpBackend = _$httpBackend_;
});
});
it("should initialize correctly", function () {
expect(SuperHeroService).toBeDefined();
});
The md.data.table dependency is included in the beAwesome module, which I'm including in my beforeEach block. beAwesome module is called in beASuperHero as well.
I've also referenced the SuperHeroService, beAwesome and beASuperHero in my karma.conf file.
However, I cannot figure out why the md-data-table (Github project: https://github.com/iamisti/md-data-table) won't be instantiated and keeps breaking, no matter what I do:
Error: [$injector:modulerr] Failed to instantiate module beASuperHero due to:
Error: [$injector:modulerr] Failed to instantiate module md.data.table due to:
Error: [$injector:nomod] Module 'md.data.table' 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.
I'm sure I'm just missing some configuration or a line of code but after hours of searching, I haven't found anything that's been helpful! Any hints to get unstuck is much appreciated.
Thanks

How to debug this angular js code?

When errors happen inside of angular, debugging seems impossible for me. I have this code:
<script>
var my_app = angular.module("campaign_listing", ['$http']);
var controllers = {};
controllers.campaign_list_controller = function($http){
var filters = {};
var campaigns = {};
this.update_fields = function(){
console.log("update!");
}
}
my_app.controller(controllers);
</script>
And it throws this error:
angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.6/$injector/modulerr?p0=campaign_listing&p1…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.6%2Fangular.min.js%3A19%3A463)
And without the minified version:
Uncaught Error: [$injector:modulerr] Failed to instantiate module campaign_listing due to:
Error: [$injector:modulerr] Failed to instantiate module $http due to:
Error: [$injector:nomod] Module '$http' 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.6/$injector/nomod?p0=%24http
I'm not using routing, so that link actually confuses me.
Can someone tell me what the problem is and how to debbug this in the future?
You could create a breakpoint in the line of my_app.controller() and step into the Angular code (good luck, that's hard for beginners).
Only from reading your code, I suggest to try this:
<script>
var my_app = angular.module("campaign_listing", []);
var campaign_list_controller = function($http){
var filters = {};
var campaigns = {};
this.update_fields = function(){
console.log("update!");
}
}
my_app.controller('campaign_list_controller', campaign_list_controller);
</script>
I suppose you might get even more problems later, because this all doesn't look much like typical Angular code. My advise: try to exercise with the Tutorial first.
The previous answer is correct but this is can also happen when you do NOT include a Controller file. Example below shows at line 60 I had commented out the controller file but at line 13 I was actually referencing a AppCtrl. If I uncomment the line 60 the error goes away.
Here is what you would get on console:

Error: [$injector:modulerr]

I am a newbie. Just learning/trying to integrate Angular with my webapp (Java + jQuery+ requireJS). I am not using any router and below is my script. From other stackoverflow I learned that this error is due to missing inclusion of ngRoute module. Since version 1.1.6 it's a separate part. But in my below code I am not at all using any ngRouter. When I am not referencing it why am I getting this error ?
Error: [$injector:modulerr] Failed to instantiate module counter due to: [$injector:nomod] Module 'counter' 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.2.11/$injector/nomod?p0=counter
Template:
<ul ng-app="counter" ng-controller="counterController">
<li>
<span class="ui-button-text" ng-bind="critical"></span>
</li>
<li>
<span class="ui-button-text" ng-bind="error"></span>
</li>
<li>
<span class="ui-button-text" ng-bind="warn"></span>
</li>
<li>
<span class="ui-button-text" ng-bind="note"></span>
</li>
</ul>
JS
requirejs.config({
paths : { angular: "/js/lib/angular/angular.min" },
shim : { "angular": { deps: [ "jquery"], exports: "angular" } }
});
require(["angular", "jquery"],function() {
var module = angular.module('counter', []);
module.controller('CounterController', function ($scope, $http, $timeout) {
$scope.critical = 0;
$scope.error = 0;
$scope.warn = 0;
$scope.note = 0;
function setData(d){
$scope.critical = d.critical;
$scope.error = d.error;
$scope.warn = d.warn;
$scope.note = d.note;
}
var getCounters = function() {
var config = {headers: {
'X-MY-Request': (new Date()).getMilliseconds()
}
};
$http.get('xxxxxxx', config)
.success(function(data, status, headers, config) {
setData(data);
$timeout(getCounters, 60000);
}).error(function(data, status, headers, config) {
// Handle the error
});
}
$timeout(getCounters, 500);
});
In your template your controller name has a lowercase beginning letter counterController. Your js has it with an uppercase CounterController. Could this be the issue?
Any injected module that isn't found will throw an error. Not just ngRoute.
Edit:
I just threw a quick plunker together and without the 'require' stuff all your code is correct. So no you aren't missing anything in your angular code. All modules are working.
So the problem must be with your 'require' setup. I have literally never used it so couldn't really assist you. Look here for more Angular + Requirejs - Loading in the wrong order.
For now, if I were you, I would learn one technology at a time. Just load your angular and jquery resources and then learn how to use them. Then when you are getting a little more comfortable add 'require'.
Had the same problem, to get more info about the error call the bootstrap function with {debugInfoEnabled: true} like so:
angular.bootstrap(document.getElementById('app-root'), ['MyApp'], {debugInfoEnabled: true});
This will print out to the console what's the underlining module that fails to instantiate.
If the $injector:modulerr shows up in your test framework you may have to include the module in your test framework as well. For me it was karma and phantomjs needing an include in:
test/karma.config.js
I encountered this error with my root app module not loading.
Eventually I reordered my dependancy list and the error whent away.
hope that helps someone. Cost me an hour!

Categories