I seem to have problems combining an MFP hybrid (no cordova) application and angular 1.5. The same application with angular 1.4.9 works fine, but if I switch to angular1.5 then i get this error:
Error: [$injector:modulerr] Failed to instantiate module ng due to:
TypeError: Cannot set property 'aHrefSanitizationWhitelist' of null
at $$SanitizeUriProvider (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:17272:35)
at new <anonymous> (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/worklight/worklight.js:1033:23)
at Object.instantiate (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4621:14)
at provider (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4435:36)
at http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:367:32
at forEach (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:337:20)
at Object.provider (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4425:9)
at ngModule (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:2476:16)
at Object.invoke (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4606:19)
at runInvokeQueue (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/vendor/angular5.js:4499:35)
http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=ng&p1=TypeError%3A%…%2FHelloWorld%2Fandroid%2F1.0%2Fdefault%2Fvendor%2Fangular5.js%3A4499%3A35)
anyone a clue what it could be?
I had the exact same problem when I upgraded to angular 1.5.0.
The problem turned out to be with a custom implementation of Function.prototype.bind that we had in our code, it looks like this interfered with the one defined in angular.
Take at the second line on your error callstack
at new <anonymous> (http://localhost:10080/Hybrid/apps/services/preview/HelloWorld/android/1.0/default/worklight/worklight.js:1033:23)
I think worklight.js may have an implementation of prototype.bind which is incompatible with the one in angular (see https://code.angularjs.org/1.5.0/docs/api/ng/function/angular.bind)
Also seeing this on the MFP 8.0 cordova plugin.
As others have mentioned, this can be caused by polyfills for Function.prototype.bind. In particular, it seems to be caused by ones that don't properly handle calling the function as a constructor with new. Simple implementations may always return the bound object regardless of invocation, whereas the expectation is that the new operator prevails over the binding and the newly created object gets returned instead.
eg.
// create an object to bind to
var alt = {
message: 'I am the alternate'
};
// our function
function myFunc() {
console.log( this.message );
};
// bind our alternate object to this for myFunc
myFunc.bind( alt );
Standard Invocation Runs as Expected
myFunc(); // output 'I am the alternate'
Invocation via new not as Expected (this is the one that breaks angular 1.5)
new myFunc(); // also outputs 'I am the alternate'</jscodeblock>
The expected behavior is that new invocation will return a new object and not the bound one.
If you need a polyfill for Function.prototype.bind be sure it properly handles this scenario such as the one found on MDN.
Related
I'm transitioning from AngularJS 1.0 to Vue and one feature I'm missing a lot is the Autovivification feature of Angular, i.e. if I set this
<input type="text" ng-model="obj.key1.key2.key3.key4">
Then as soon as I enter some value in the text-field Angular automatically creates the nested Object for me inside obj, i.e. obj.key1.key2.key3.key4 = value
(Vue2 on the other hand throws an error in console: TypeError: Cannot read property 'key2' of undefined")
1. Is it possible to do in Vue? If not, why is the feature missing?
Similarly, if some nested key doesn't exists it Angular doesn't throw warnings like Vue but waits for me to create the object and it starts showing up as soon as the nested key is created
var obj = {}; //controller
View: {{obj.key1.key2}} //doesn't throw error in Angular but shows warning in Vue
2. Is there some setting for enabling the lenient mode this in Vue?
I understand that Angular and Vue are two very different frameworks, but then there is a lot of similarities (like v-model, v-for, etc) so just wondering why this is different and if it can be same or if there is a reason behind not having this?
I'm creating a simple web page where i display a button which execute this code
$window.open(link, "_self");
The link variable is a simple telegram link for a channel, but this is not the problem, the problem, as the question say itself, is about arguments variable in $window.open.
This in my opinion is strange because when i logged in the console $window.open function, i received this output:
function pbWindowOpen() {
lastBlockCaller = {
caller: arguments.callee.caller,
args: arguments.callee.caller.arguments
};
try {
return newWindowOpenFn.apply(this, argument…
At this point, should not i see an argument variable inside this function? How could i solve this problem?
Passing some arguments could resolve my problem? If yes, there's an answer about why i'm having arguments null?
I've also tried with window.open but nothing changes, always the same problem
That shouldn't happen if you are running your code in a browser (in other env you may have some initialized variable window representing something else), $window is a wrapper in top of var currWindow = $window.self || $window.window and then do a perform of callong open(...) function. Hence, you neither using the native javascript code badly in a angular context, and again that would be easily mock-ableif we mock $window and create a property call self or window inside it. So it will work in the application, and will also be testable.
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
Our Mobile App is getting "TypeError: Attempted to assign to readonly property." only on IOS 8 and the stack traces are not helpful and seem to be in Angular code.
This might be happening because of the "use strict" on top level of Angularjs code.
My questions are (1) why did it start happening only on IOS8? is this an IOS8 bug?
(2) or is this an angular bug surfaced on IOS8? (3) Or maybe we are violating strict mode rules but only IOS8 started to catch them! I am skeptical about the third option because strict mode is supported by other major browsers.
I have found one similar reported issue here.
Looks like this is an IOS8 bug
At least the guys at ember.js will temporarily strip the 'use strict' from their code until it's fixed.
Ember.js issue
SOLUTION -
Note:
angular.copy didn't work for me
lodash cloneDeep didn't work either.
removing "use strict"; didn't help - It just removed the error being logged in a try/catch arround the "erroneous" assignment to a readonly value
For us, the value that was being passed back from the SQL promise value was an array of objects.
The values that we were getting "read only" error on were strings, bools, and numbers.
console.log('this will log');
sqlReturnArray[0].name = "Bob"; // read only error here
console.log('wouldnt get to here to log');
I figured, well, if I can't assign values to properties on THOSE objects within the array, why can't I just copy over all the objects' values? Assignment of objects is by reference so just doing a loop over the array won't help. You need to loop over the keys and values.
This solved our problem
// where sqlReturnArray is the object given from the SQL promise
var newArrayOfObjects = [];
angular.forEach(sqlReturnArray, function (obj) {
var newObj = {};
angular.forEach(obj, function (val, key) {
newObj[key] = val;
});
newArrayOfObjects.push(newObj);
});
I just had this error and the fix was pretty simple.
My Code was-
$http.get('/api/v1/somedata').then(function(result){
$scope.data.somedata = result.data.list;
});
I get the TypeError in the assign. Because I haven't defined $scope.data.somedata anywhere and it got $scope.data undefined and trying to assign some property to it initiated the error.
I simply put $scope.data = {somedata : [] } in the top of the controller. I can also get rid of this error by changing $scope.data.somedata to $scope.somedata because any property of the $scope object that is undefined will end up to the $rootscope and won't give any error. I found this is pretty hard to debug my view-model. And also for this TypeError I can find out what exactly is wrong.
I had it with a form.
my issue was because of binding an SQL Return Object to an input.
after coping with angular.copy() problem resolved.
try to copy your return values and retry.
$scope.yourFunc= function(result) {
var item = angular.copy(result.rows.item(0));
...
};
I've decided that I am going to try and learn backbone.js by making a web app. This is the first time I have done anything extensive in javascript, so the answer to my problem may be right in front of my face.
I have the web app on github, along with a running version that doesn't work. The javascript console just says that something is undefined when I don't think it should be. Here's the error that chrome gives for line 30 of app.js:
Uncaught TypeError: Cannot read property 'el' of undefined
I've sort of been referencing the backbone-fundamentals example modular to-do app, and it doesn't seem to have any issues with a similar thing.
If anyone could point out what I am doing wrong, I would be most appreciative!
Thanks in advance!
Your Machine view render method was missing return this and by default all methods return undefined - that's why chaining didn't work
Edit: and a small tip:
jQuery, Underscore and Backbone register globally - and thanks to that you don't have to define them as dependencies every time - it's enough if you require them in your main script once and after that you can access them from the global scope as you normally would
In my case i was returning this without the return keyword. As i was using javascript and not coffeescript it failed on me. So, if you are using javascript use return this; instead of just this in the last line of the render() function.
I also had a problem when using this.collection.on('reset', this.render(), this). I instead had to use this.collection.on('reset', this.render.bind(this));