I have been using the ng grid and had to get inside their code to resolve an issue. Following is a snippet of code from ng grid debug JavaScript file
var value = item[condition.column] || (col.field ? item[col.field.split('.')[0]] : $utils.evalProperty(item, col.field));
Can someone please tell me what is this evalProperty?
I happened to be working on a library using ng-grid 2.x and came across an issue with this same method.
Using the javascript debugger, I put a breakpoint on a method call to $utils.evalProperty, stepped into the function, and discovered it's actually part of ng-grid:
angular.module('ngGrid.services').factory('$utilityService', ['$parse', function ($parse) {
// ...
this.evalProperty = function (entity, path) {
return $parse(preEval('entity.' + path))({ entity:
};
Related
I have the following example code in my learning app. The service does his job and pulls some data out of a page with json code generated by php, so far so good.
service:
(function() {
'use strict';
angular
.module('app.data')
.service('DashboardService', DashboardService);
DashboardService.$inject = ['$http'];
function DashboardService($http) {
this.getFormules = getFormules;
////////////////
function getFormules(onReady, onError) {
var formJson = 'server/php/get-formules.php',
formURL = formJson + '?v=' + (new Date().getTime()); // Disables cash
onError = onError || function() { alert('Failure loading menu'); };
$http
.get(formURL)
.then(onReady, onError);
}
}
})();
Then i call the getFormules function in my controller and put all the data inside my $scope.formuleItems and test if everything succeeded and 'o no'... $scope.formuleItems = undefined! - Strange because my view is showing data?
part of the controller:
dataLoader.getFormules(function (items){
$scope.formuleItems = items.data;
});
console.log('+++++++++++++++++', $scope.formuleItems); // gives undefined
The first thing i did was search around on stackoverflow to look if someone else had the same issue, and there was: Undefined variable inside controller function.
I know there are some walkarounds for this, i've done my own research, but something tells me that this (see example below) isn't the best way to solve this problem.
solution one: put $watch inside of the controller
$scope.$watch('formuleItems', function(checkValue) {
if (checkValue !== undefined) {
//put the code in here!
}
}
or even:
if($scope.formuleItems != null) {}
The rest of the controller is relying on $scope.formuleItems. Do i really have to put everything into that $watch or if? Can i fix this with a promise? I never did that before so some help would be appreciated.
The code in your callback
function (items){
$scope.formuleItems = items.data;
}
is evaluated asynchronously. That means you first fire the request, then javascript keeps on executing your lines of code, hence performs
console.log('+++++++++++++++++', $scope.formuleItems); // gives undefined
At this point the callback was not invoked yet, because this takes some time and can happen at any point. The execution is not stopped for this.
Therefore the value of $scope.formuleItems is still undefined, of course.
After that - at some not defined time in the future (probably a few milliseconds later) the callback will be invoked and the value of $scope.formuleItems will be changed. You have to log the value INSIDE of your callback-function.
You urgently have to understand this concept if you want to succeed in JavaScript, because this happens over and over again :)
I'm using angular1, angular_1_router and angular2 in the same application. When I run the app, I get the error decorator is not a function. The image of the error is shown below.
<script src="~/lib/angular/angular.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.46/angular2.dev.js"></script>
<script src="~/lib/angular_1_router.js"></script>
Bit of a hacky solution right now, rather not need to muck about with source files. But, from an issue on the repo, if you change
var exports = {Injectable: function () {}};
to
var exports = {Injectable: function () {
return (function(target) {
return target;
});
}};
It should work and stop giving you that error - worked for me. Hopefully it will be fixed properly soon.
I have been through several tutorials and posts about this topic and still can't seem to figure out what is wrong with my code. To me it seems I am having scoping issues with the data within my service. My code is split up into separate files. Here is my code:
github link : https://github.com/StudentJoeyJMStudios/PetPinterest.git
//in dataService.js
var app = angular.module('se165PetPinterestWebApp');
app.service('SharedData', function ()
{
var categoryOfSelectedAnimals = [];
this.setCatOfSelAnimals = function(pulledCategoriesFromParse)
{
categoryOfSelectedAnimals = pulledCategoriesFromParse;
console.log('after assignment in set::' + categoryOfSelectedAnimals);
};
this.getCatOfSelAnimals = function()
{
console.log('in get::::' + categoryOfSelectedAnimals);
return categoryOfSelectedAnimals;
};
});
in my first controller to set the data in signup.js
app.controller('SignupCtrl',['$scope', 'SharedData', function ($scope, SharedData)
{
var Categories = Parse.Object.extend('Categories');
var query = new Parse.Query(Categories);
query.find({
success: function(results)
{
$scope.availableCategoriesOfAnimals = results;
SharedData.setCatOfSelAnimals(results);
},
error: function(error)
{
alert('Error: ' + error.code + ' ' + error.message);
}
});
};
}]);
Then in my other controller trying to get the data from the array within my service:
var app = angular.module('se165PetPinterestWebApp');
app.controller('CatSelCtrl', function ($scope, SharedData)
{
$scope.availableCategoriesOfAnimals = SharedData.getCatOfSelAnimals();
});
When I print the contents from the SharedData.getCatOfSelAnimals I get 0 every time. Please help. Thank you very much in advance.
EDIT: After playing around with a string a bit I am finding the changed string in the set function is not saved into the service and when I call my get function within my service the string is not changed from the set method. Please help, thank you in advance.
EDIT: So it looks like when I navigate to new page by using window.location.href = '../views/categorySelection.html'; in my signup.js it reloads my dataService.js which re-sets my variables back to nothing. Does anyone have any ideas as to how to fix this?
Edit
First: why you lose data
You need to setup routing properly. Right now you are not changing views but rather using window.location.href to load a new bootstrap file (dashboard.html), i.e. everything saved in memory will be lost. So you have been doing it right, sort of, but the moment you change to dashboard.html all data from Parse is lost.
You can solve this by configuring routes and use $location.url() to change URL. Read more about angular.route here: https://docs.angularjs.org/api/ngRoute/service/$route
The angular way
After looking at your code and running your app I think we need to take a step back. Angular is tricky to get used to but there is a lot of good tutorials. I think you might wanna read some of them to get a better grasp of how it works and how to setup and build your app.
Start here: http://www.airpair.com/angularjs
Boilerplate
Found this boilerplate for an Angular app using Parse. It might be something you could use. https://github.com/brandid/parse-angular-demo
Original
Or an even quicker way to empty $scope.availableCategoriesOfAnimals and then merge new data without breaking reference:
$scope.availableCategoriesOfAnimals.length = 0;
Array.prototype.push.apply($scope.availableCategoriesOfAnimals, pulledCategoriesFromParse);
You are breaking the reference on assignment. This is a JavaScript issue, not an angular one for that matter ;)
Try this in your set function:
categoryOfSelectedAnimals.length=0;
pulledCategoriesFromParse.forEach(function (e) {categoryOfSelectedAnimals.push(e)});
in stead of reassigning
edit: angular extend works on objects, not arrays, so replaced it with a bit of JS.
I created Extjs.Panel and now I would like to dynamically load a content to it. So I wrote this simple code
Ext.get('contentPanel').load({
url: '#Url.Action("TempView","Home")'
});
After executing this function, panel is populated with TempView, however couple of seconds later I get an error in Extjs library
Microsoft JScript runtime error:Unable to get value of the property
'events': object is null or undefined.
EDIT
I flollowed #DmitryB advice and I used debug version of library. Here is what I found out. It turned out that the problem is in function
getElementEventCache
which is defined in file ext-all-debug.js in line 11108. The function looks this way
getElementEventCache : function(element) {
if (!element) {
return {};
}
var elementCache = Ext.cache[this.getId(element)];
return elementCache.events || (elementCache.events = {});
},
The exception is thrown in the last line, because of the fact that elementCache is null.
Here is the stacktrace from visualstudio
I had a very similar error that was resolved by adding the following line. (from this forum thread)
if(Ext.isIE) {
Ext.enableGarbageCollector=false;
}
I'm using bellow code and work cool. This may help you.
Try this
var content_div = Ext.get(div_id);
content_div.load({
url:your_url,params:{id:'abc'},scripts:true,text: 'Loading...'});
content_div.show();
How should I go about this?
I was able to get the data into CKEditor by using a textarea with the name attribute matching my model and a script tag with ng:bind-template to call CKEDITOR.replace.
I then made a CKEditor plugin that detects changes and writes them back to the textarea. The problem is that the textarea looses its event handlers when CKEditor initializes and CKEditor doesn't pickup changes to the textarea. This makes me think that I am approaching this the wrong way.
Next I tried using ng:eval-order="LAST" ng:eval="setupCKEditor()" and setting up the editor from the setupCKEditor() function. This didn't work because even with ng:eval-order="LAST" the function is still run before the nodes are created.
I have found that adding a setTimeout(function () {...},0) around the CKEDITOR.replace helps. Now the only problem is that when it changes the model it doesn't repaint the screen until another field is edited.
scope.$root.$eval(); seems to fix that.
Update
We ended up abandoning this since we could never get it to reliably work. We switched to TinyMCE with Angular-UI for a while and then ended up building something custom.
This sort of works with the onchange plugin from http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html.
angular.directive("my:ckeditor", function (expression, compiledElement) {
return function fn(element) {
var scope = this;
setTimeout(function () {
CKEDITOR.replace("editor-" + index, {extraPlugins: 'onchange'});
scope.$watch("layers[" + index + "].src", function () {
if (!CKEDITOR.instances["editor-" + index]) return;
if (scope[expression] == CKEDITOR.instances["editor-" + index].getData()) return;
CKEDITOR.instances["editor-" + index].setData(scope[expression]);
});
CKEDITOR.instances["editor-" + index].on("change", function () {
scope[expression] = CKEDITOR.instances["editor-" + index].getData();
scope.$root.$eval();
});
}, 0);
};
});
Update
This has only been tested on v0.10.6
For completeness, attached is a module to provide an angular directive. I've not used it yet, so I can not comment on how well it works/integrates.