I am migrating an application from Angular1 to Angular2, in which I used the svg.js library to draw an SVG. Some elements of the SVG contained "ng-click" directives, that I made the SVG library print to the final SVG.
That worked alright in Angular1, however, now the directive is called "(click)" and everything breaks. I traced the SVG sources and found that the following call
this.node.setAttribute(attr, value.toString())
results in the following error message:
VM22161:1 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '(click)' is not a valid attribute name.(…)
Any ideas to solve that problem? Patching the SVG source would be ok for me, if there's no other way.
A valid and quick workaround is to use the binding syntax of Angular2, that allows to use "on-click" instead of "(click)".
Related
I have an angular app (using AngularAMD/RequireJS) and I'm converting the design to use angular-material. I have a toolbar directive that has md-icon using md-svg-src.
Trouble running the toolbar-directive_test.js file.
At first it kept complaining "Unresolve GET request images/icon.svg". I resolved in the test setup using:
$httpBackend.whenGET(/\.svg$/).respond('');
Now if I run that test file using fdescribe(...) all the tests pass.
But if I run all my app tests (without fdescribe on that toolbar test file), they are somehow failing because of the md-icons. The error I get, which appears on another test file:
TypeError: Cannot read property 'element' of undefined
The stack-trace does not give any guidance on what is causing it. Only mentions angular-mocks.js, and then exits around the any random assertion on this test file where the error is showing. And if I xdescribe this file which is showing the element of undefined error, the next test file is failing with this error instead.
If I use xdescribe on toolbar-directive_test.js file (the one which has the md-icon), all the tests pass.
And if I run all tests including the toolbar-directive_test.js file, but I remove all the md-icon instances from its template, again all the tests are passing.
I have tried including ngMaterial-mocks package in my tests, and that doesn't do anything. But in general, I'm not using that package (but I am using ngMocks).
Any suggestions on how to debug this?
As #Widget suggested, this works:
$httpBackend.whenGET(/\.svg$/).respond('<svg></svg>');
Where this didn't work:
$httpBackend.whenGET(/\.svg$/).respond('');
Has anybody had any luck with using blueimp jquery-file-upload with browserify? I have the following requires in my javascript ...
require("jquery");
require("blueimp-file-upload/js/jquery.iframe-transport.js");
require("blueimp-file-upload");
require("blueimp-file-upload/js/jquery.fileupload-angular.js");
and I get the following error when I use the resulting browserified code...
TypeError: $element.fileupload is not a function
... at the line ...
$element.fileupload(angular.extend(
... inside of jquery.fileupload-angular.js. Without browserify this was working fine. I can't figure out where the fileupload() function is being added to the prototype of the $element.
By request I'm posting what I did here to get around the issue. So technically speaking not an answer but a "work around". As I indicated in my comment above I used gulp-concat along with gulp-uglify to do the minimizing "manually". I say manually because I have to list all of the source files here rather than relying on the requires.
gulp.src([src1, src2, ..., srcN])
.pipe(concat('bundle.js'))
.pipe(uglify())
.pipe(gulp.dest(outputdir));
I am using polymer 1.0.8 with angularjs through this library.and i am getting error
Uncaught TypeError: prototype.registerCallback is not a function
tried solutions mentioned in this and this link
Note: m not using any paper elements.
Note: no core or iron elements are used.m working on much simple example as a beginner.
but still m getting this error and no custom polymer element is working.please help me here.......
i don't know the reason behind it but i fixed this just by removing element's name from definition.
Polymer("x-double",{
properties:{});
to this
Polymer({
properties:{});
may be version's problem or something else...........
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'm trying to use the AngularJS directive ui-tinymce with tinyMce 4.0.25 and IE10, and am unable to get it to work at all.
My html looks like this:
<textarea ui-tinymce ng-model="fubar"></textarea>
In my controller, I have:
$scope.fubar = "this is a <b>test</b>";
It all goes badly at these two lines in the tinymce initialization code itself.
Theme = ThemeManager.get(settings.theme);
self.theme = new Theme(self, ThemeManager.urls[settings.theme]);
The first line sets Theme to undefined and the last line aborts with the message "Object doesn't support this action". The value of ThemeManager.urls[settings.theme] is "http://localhost:57683/Scripts/tinymce/themes/modern", which seems right.
I can no longer find it, but I'd previously found a post where this issue was due to this code being executed before some other part of tinyMCE had been loaded. The solution there was to use a certain tinyMCE option that forced loading in a certain way, however that option has been removed in tinyMCE 4.x. Even more frustrating is that I had tinyMCE working for days with my own directive when suddenly this occurred. I've simplified this to just using ui-tinymce (with the same result) to rule out any of my code as the culprit.
Mea culpa! I'd switched to using tinymce.js instead of tinymce.min.js and didn't realize that the min code expects the theme to be modern/theme.min.js (which I had) but the unminified code expects the theme to be modern/theme.js.