The Chrome console is throwing this error when I use a md-button in the html inside a google maps infowindow.
Error: [ngTransclude:orphan] http://errors.angularjs.org/1.3.2/ngTransclude/orphan?p0=%3Cbuttonlass%3D%22md-primary%20md-button%20md-default-theme%22%20ng-transclude%3D%22%22%20ng-click%3D%22button1callback()%22%20tabindex%3D%220%22%3E
at Error (native)
at https://code.angularjs.org/1.3.2/angular.min.js:6:416
at Ja.link (https://code.angularjs.org/1.3.2/angular.min.js:237:351)
at $ (https://code.angularjs.org/1.3.2/angular.min.js:70:46)
at I (https://code.angularjs.org/1.3.2/angular.min.js:59:251)
at g (https://code.angularjs.org/1.3.2/angular.min.js:51:299)
at g (https://code.angularjs.org/1.3.2/angular.min.js:51:316)
at https://code.angularjs.org/1.3.2/angular.min.js:50:414
at WindowChildModel.angular.module.service.buildContent (http://rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.js:863:63)
at WindowChildModel.angular.module.service.createWindowOptions (http://rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.js:831:29)angular.js:11383 (anonymous function)angular.js:8459 $getangular.js:8127 $angular.js:7637 Iangular.js:6993 gangular.js:6996 gangular.js:6872 (anonymous function)angular-google-maps.js:863 angular.module.service.buildContentangular-google-maps.js:831 angular.module.service.createWindowOptionsangular-google-maps.js:3355 angular.module.factory.WindowChildModel.createGWinangular-google-maps.js:3240 __bindangular-google-maps.js:3285 WindowChildModelangular-google-maps.js:6930 angular.module.factory.Window.initangular-google-maps.js:6915 (anonymous function)angular.js:12984 (anonymous function)angular.js:14200 $get.k.$evalangular.js:14016 $get.k.$digestangular.js:14238 (anonymous function)angular.js:4842 eangular.js:5215 (anonymous function)
I'm using the angular-google-maps http://angular-ui.github.io/angular-google-maps/#!/ library to use google maps with angular. In this plunker you can reproduce the error http://embed.plnkr.co/fWlFjuyuldZj6uITvWH7/preview
Do you have any idea how to fix this?
When I use a native html button it works well, but I need to use angular material.
Thanks.
The markup which you have written inside <ui-gmap-window> is getting compiled multiple times. Hence the error.
I have created a directive to not to compile the contents by the controllers scope.
Here is the updated plunker. http://plnkr.co/edit/y02RsaWBMuaiwCT0jPua?p=preview
Related
In my project I am using angular version 1.4.6 and angular ui router version 2.15
Note : I just updated angular from 1.4.3.
Whenever I change states on my page I get below error.
Code is same I just updated angular version.
Error
TypeError: Cannot read property 'length' of null
at JQLite.(anonymous function) (http://localhost:8001/jspm_packages/npm/angular#1.4.6/angular.js:1718:22)
at Scope.parent.$get.Scope.$broadcast (http://localhost:8001/jspm_packages/npm/angular#1.4.6/angular.js:7701:32)
at Scope.parent.$get.Scope.$destroy (http://localhost:8001/jspm_packages/npm/angular#1.4.6/angular.js:7535:18)
at cleanupLastView (http://localhost:8001/jspm_packages/github/angular-ui/ui-router#0.2.15/angular-ui-router.js:3939:26)
at http://localhost:8001/jspm_packages/github/angular-ui/ui-router#0.2.15/angular-ui-router.js:3972:13
at publicLinkFn (http://localhost:8001/jspm_packages/npm/angular#1.4.6/angular.js:2976:15)
at updateView (http://localhost:8001/jspm_packages/github/angular-ui/ui-router#0.2.15/angular-ui-router.js:3962:23)
at http://localhost:8001/jspm_packages/github/angular-ui/ui-router#0.2.15/angular-ui-router.js:3924:11
at Scope.parent.$get.Scope.$broadcast (http://localhost:8001/jspm_packages/npm/angular#1.4.6/angular.js:7701:32)
at $state.transitionTo.$state.transition.resolved.then.$state.transition (http://localhost:8001/jspm_packages/github/angular-ui/ui-
I was getting the same error. Turned out to be an issue in angular-material. Are you using it? upgrading to 0.11.0-master-1a99821 fixed it for me.
In a recent question (Reference Angular binding from javascript) I asked how to bind a generated SVG to a specific div. I got two good answers which I've been tinkering with since.
I'm trying to display a SVG image which gets built based on specific properties.
Basically I have a tiny Angular script which includes a number of functions for generating svg code, e.g.:
.controller('ctlr',['$scope','$sce', function($scope,$sce) {
$scope.buildSvg(width, height, obj){
var img = ...call a lot of svg-functions
return $sce.trustAsHtml(img);
}
My intention is to include this on the web page via:
<div ng-bind-html="buildSvg(60,140,item)">svg should go here</div>
However, I have a hard time getting this to work, at least with the javascript generated SVG tags, it works if I copy paste the img code into another $scope variable (and add a lot of escaping) and then include it via ng-bind-html.
As the code is available on Plunker here:
Example
I get the following error:
Error: [$sce:itype] http://errors.angularjs.org/1.4.0/$sce/itype?p0=html
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:6:416
at $get.trustAs (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:140:269)
at Object.$get.d.(anonymous function) [as trustAsHtml] (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:142:444)
at m.$scope.buildSvg (file:///C:/Dropbox/workspace/famview/public/javascripts/svgController.js:37:16)
at fn (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:210:400), <anonymous>:2:301)
at Object.get (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:115:108)
at m.$get.m.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:131:221)
at m.$get.m.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:134:361)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:19:362
Do I need to somehow inform $sce to escape string literals in the SVG tags?
I think your problem is more regarding to how you are binding the object in html. I mean, the fact that you are returning the object through a function can be the cause of the problem. Moreover, if you see angular logs, they are complaining about "digest" and "apply", that is the life cycle of all the binding in Angular.
So basically, you will be able to solve that doing $sce.trustAsHtml(SVGSTRING) as you did, but saving it before in a variable like $scope.svg.
SCRIPT.js
$scope.svg = $sce.trustAsHtml(SVGSTRING);
And in the html should be as simple as that
HTML
<div ng-bind-html="svg"></div>
It should work, I am putting you a plunker in which you can see how it even works retrieving data from a request
http://embed.plnkr.co/gQ2Rrn/
Hope this helps
I have the following problem. I have two exactly the same list views, with directives inside (I use angularJS). One of them runs without any issues, however the other one throws the following error:
TypeError: Cannot read property 'scrollWidth' of null
at Object.ionic.views.Scroll.ionic.views.View.inherit.initialize.options.getContentWidth (ionic.bundle.js:4081)
at ionic.views.Scroll.ionic.views.View.inherit.resize (ionic.bundle.js:4835)
at ionic.views.Scroll.ionic.views.View.inherit.run (ionic.bundle.js:4147)
at ionic.bundle.js:39888
at ionic.bundle.js:21929
at completeOutstandingRequest (ionic.bundle.js:12022)
at ionic.bundle.js:12330ionic.bundle.js:17696 (anonymous function)ionic.bundle.js:14989 $getionic.bundle.js:21932 (anonymous function)ionic.bundle.js:12022 completeOutstandingRequestionic.bundle.js:12330 (anonymous function)
My code is pretty long, so I am not posting it yet - if there is need to do so, I will :)
HINT: I've tested the app on my phone, and it seems that I cant scroll on which the error occurs. Any suggestions?
Thanks
Ok, so I finally figured it out. I simply didnt have any div in my ion-scroll. :)
After I update from 1.2.24 to 1.3.0-rc.2 I'm getting following error. When I remove ngAnimate from modules, it disappears. Only thing that uses animates is angular-ui-bootstrap.
TypeError: Cannot read property 'add' of undefined
at M (http://localhost/webapp/js/angular-animate.min.js:8:113)
at http://localhost/webapp/js/angular-animate.min.js:19:6
at http://localhost/webapp/js/angular-animate.min.js:8:29
at m.$digest (http://localhost/webapp/js/angular.min.js:116:279)
at m.$apply (http://localhost/webapp/js/angular.min.js:118:386)
at l (http://localhost/webapp/js/angular.min.js:77:80)
at u (http://localhost/webapp/js/angular.min.js:81:389)
at XMLHttpRequest.v.onreadystatechange (http://localhost/webapp/js/angular.min.js:82:477) angular.js:10627
(anonymous function) angular.js:10627
(anonymous function) angular.js:7824
m.$digest angular.js:13166
m.$apply angular.js:13380
l angular.js:8849
u angular.js:9064
v.onreadystatechange angular.js:9003
Thanks in advance for any help...
Edit:
After block by block examination, I found out that accordion causes the error. But it still works and animation is also ok. But it's annoying to have errors.
would need more infos but a solution could be
[ngAnimate]=... instead of * ngAnimate.
I am working on a modified version of the Hot Towel template to create an Angular SPA. I am using Breeze to access my data services with kendo UI and data viz for widgets and charts.
I am facing a similar issue to the one stated in this SO post Chrome//kendoUI/jQuery: Maximum call stack size exceeded. On binding my breeze service output directly to my chart, I get a Maximum Call Stack Size exceeded error on the client with 'Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!Watchers fired in the last 5 iterations: []'
Breeze results do have circular references as the link above also indicates. I receive no issues on binding this to normal angular scope variables, but the error occurs only upon binding this to my charts. Filtering data on the client as the link suggests probably will have a performance impact. I tried a couple of replacer functions and JSON.prune as well, but they remove the data that I need to display on the charts as well :(
Is there any other fix for this?
The complete error is pasted below. Looks as though a deep copy is being performed for each property, but since there are circular references, it ends up throwing an overflow error
RangeError: Maximum call stack size exceeded
at Object.toString (native)
at isArray (http://localhost:61438/Scripts/angular.js:596:19)
at isArrayLike (http://localhost:61438/Scripts/angular.js:278:27)
at forEach (http://localhost:61438/Scripts/angular.js:324:16)
at copy (http://localhost:61438/Scripts/angular.js:871:7)
at copy (http://localhost:61438/Scripts/angular.js:858:23)
at copy (http://localhost:61438/Scripts/angular.js:875:28)
at copy (http://localhost:61438/Scripts/angular.js:858:23)
at copy (http://localhost:61438/Scripts/angular.js:875:28)
at copy (http://localhost:61438/Scripts/angular.js:858:23) angular.js:9778
(anonymous function) angular.js:9778
(anonymous function) angular.js:7216
Scope.$digest angular.js:12270
(anonymous function) angular.js:12450
completeOutstandingRequest angular.js:4300
(anonymous function)
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.2.16/$rootScope/infdig?p0=10&p1=%5B%5D angular.js:78
(anonymous function) angular.js:78
Scope.$digest angular.js:12290
(anonymous function) angular.js:12450
completeOutstandingRequest angular.js:4300
(anonymous function)
This happens because the Breeze entities have references to each other and most vendor grids don't stop iterating over the properties when binding. A fix for this is using a projection as described here -
http://www.breezejs.com/documentation/knockout-circular-references