Right now I have this JS bin: http://jsbin.com/uhabed/64/ in which you can hopefully see the infite scroll loading of more images. These images are added when the page bottom is reached by the scroll bar on line 13 of the javascript:
angular.module('infinitescroll', []).directive('onScrolled', function () {
return function (scope, elm, attr) {
var el = elm[0];
elm.bind('scroll', function () {
if (el.scrollTop + el.offsetHeight >= el.scrollHeight) {
scope.$apply(attr.onScrolled);
}
});
};
}).controller("scrollCtrl", function($scope, getStuff){
$scope.data = getStuff;
$scope.loaddata = function(){
var length = $scope.data.length;
for(var i = length; i < length + 10; i ++){
$scope.data.push(i);
}
};
$scope.loaddata();
}).factory('getStuff',function($http) {
var images_list = ["www.google.com","www.facebook.com","www.supercuber.com","www.snappiesticker.com"];
images_list.addStuff = function(){ $http.get("http://jsbin.com/yehag/2").success(function(data){
var returned_list = JSON.parse(data.javascript);
console.log(returned_list);
for (var i=0;i<8;i++){
images_list.push(returned_list[i].name);
}
});
};
console.log(images_list);
return images_list;
});
I want to replace line 13 with $scope.loaddata = images_list.addStuff(); from the factory below. basically to use the $http function and add the data from that instead. images_list is already being returned properly seeing as the first 4 items in the output are the ones defined in the factory on line 21. However, the optomistic $scope.loaddata = images_list.addStuff(); doesn't seem to be working.
How can I pass this function up into the $scope.loaddata?
images_list is an array. You can't arbitrarily assign a property to it like images_list.addStuff
Create an object and return that object from the factory
factory('getStuff',function($http) {
var images_list = ["www.google.com","www.facebook.com","www.supercuber.com","www.snappiesticker.com"];
var addStuff = function(){....};
return{
images_list: images_list,
addStuff: addStuff
}
});
Then in controller:
$scope.data = getStuff.images_list;
$scope.loaddata = getStuff.addStuff
This is not a clean way of having an array-like object that has additional properties on it, however the above answer that you 'cannot add functions onto an array' is incorrect. While creating array-like objects is kind of messy and should be avoided where possible. If you feel it is absolutely necessary, I would handle it like this (this is similar to how jQuery does it.
function ImagesList($http) {
this.push.apply(this, [
"www.google.com",
"www.facebook.com",
"www.supercuber.com",
"www.snappiesticker.com"
]);
this._$http = $http;
}
ImagesList.prototype = {
push: [].push,
splice: [].splice,
pop: [].pop,
indexOf: [].indexOf,
addStuff: function () {
this._$http.get("http://jsbin.com/yehag/2").then(function(data){
var returnedList = angular.toJson(data.javascript);
for (var i=0; i<8; i++) {
this.push(returnedList[i].name);
}
}.bind(this));
}
};
angular
.module('infinitescroll', [])
.service('imageList', ImagesList);
.directive('onScrolled', function () {
return {
scope: {
onScrolled: '&'
},
link: function (scope, elm, attr) {
var el = elm[0];
// Original implementation will end up causing memory leak because
// the handler is never destroyed. Use as follows
elm.on('scroll.iScroll', function () {
if (el.scrollTop + el.offsetHeight >= el.scrollHeight) {
scope.$apply(attr.onScrolled);
}
}).on('$destroy', function () {
elm.off('.iScroll');
});
}
};
}).controller("scrollCtrl", function($scope, imageList){
$scope.data = imageList;
$scope.loaddata = function(){
var length = $scope.data.length;
for(var i = length; i < length + 10; i++){
$scope.data.push(i);
}
};
$scope.loaddata();
})
Related
Below function is being called from directive link function. My problem is, I cant able to access scope inside then function
function workerInit(scope) {
var data = scope.vm.graphData;
graphViewService.send(new WorkerData(data.node[0].id,2,data.node[0].currentEntity)).then(function(response){
postWorkerResponse(response);
//scope is not defined
})
nodesinQueue.push(data.node[0].id)
}
My factory code
app.factory("graphViewService",['$q',function($q){
var graphViewService = {};
var worker = new Worker('./app/modules/common/graphViewWorker.js');
var defer = $q.defer();
worker.addEventListener('message', function(e) {
defer.resolve(e.data);
}, false);
return {
send : function(data){
defer = $q.defer();
worker.postMessage(data); // Send data to our worker.
return defer.promise;
}
};
}])
My Directive Code(removed unnecessary function def from original)
(function () {
var app = angular.module('sureApp');
app.directive('graphView', function ($rootScope, graphViewService) {
var controller = function () {
var vm = this;
//controller code
};
var linkFunction = function (scope, elem, attrs) {
var el = angular.element(elem);
var graph = graphInit(scope, scope.vm.graphData.node[0]);
nodes = new vis.DataSet(graph.nodeList);
edges = new vis.DataSet(graph.edgeList);
var container = el.find('#network')[0];
var data = {
nodes: nodes,
edges: edges
};
network = new vis.Network(container, data, networkOptions());
networkEvents(network, scope);
new detailWindow(el, scope);
}
function graphInit(scope, node) {
var nodeList = [];
var edgeList = [];
workerInit(scope);
scope.vm.graphChips = [];
scope.vm.graphChips.push(node.currentEntity);
nodeList.push(updateNodeStructure(node, lIcons));
return {
nodeList: nodeList,
edgeList: edgeList
}
}
function workerInit(scope) {
var data = scope.vm.graphData;
WorkerData.url = data.url;
WorkerData.requestHeaders = requestConfig.headers;
graphViewService.send(new WorkerData(data.node[0].id,2,data.node[0].currentEntity)).then(function(response){
postWorkerResponse(response);
//scope is not defined
})
nodesinQueue.push(data.node[0].id)
console.time("test");
}
function WorkerData(id, level, currentEntity){
this.url = WorkerData.url
this.requestHeaders = WorkerData.requestHeaders;
this.id = id;
this.level = level;
this.currentEntity = currentEntity;
}
//removed other function def
return {
restrict: 'E',
scope: {
graphData: '=',
detailedView: '=',
mainEntity: '='
},
link: linkFunction,
controller: controller,
controllerAs: 'vm',
bindToController: true,
templateUrl: './app/modules/common/graphView.html'
};
})
}());
Can anyone help me on this?
Check by adding apply function
function workerInit(scope) {
var data = scope.vm.graphData;
graphViewService.send(new WorkerData(data.node[0].id,2,data.node[0].currentEntity)).then(function(response){
scope.$apply(function () {
postWorkerResponse(response);
//Check here able to access scope
});
});
nodesinQueue.push(data.node[0].id)
}
I'm fairly new to Angular and very new to Jasmine testing. I have a function in my controller at pushes an object into an empty array (object taken from json data).
my controller with the functions pertaining to the cart:
$scope.cart = [];
$scope.addItemToCart = function(choc) {
var cartItem = readCartItem(choc.id);
if(cartItem == null) {
//if item doesn't exist, add to cart array
$scope.cart.push({type: choc.type, id: choc.id, price: choc.price, quantity: 1})
} else {
//increase quantity
cartItem.quantity++;
}
}
$scope.cartTotal = function() {
var sum = 0;
$scope.cart.forEach(function(item) {
sum += item.price * item.quantity;
});
return sum;
}
$scope.getTotalQuantity = function() {
var totalItems = 0;
$scope.cart.forEach(function(item) {
totalItems += item.quantity;
});
return totalItems;
}
$scope.clearCart = function() {
$scope.cart.length = 0;
}
$scope.removeItem = function(choc) {
$scope.cart.splice(choc,1);
}
function readCartItem(id) {
//iterate thru cart and read ID
for(var i=0; i<$scope.cart.length; i++) {
if($scope.cart[i].id === id) {
return $scope.cart[i]
}
}
return null;
}
My test:
describe('Controller: ChocoListCtrl', function () {
beforeEach(module('App'));
var scope, ctrl, json;
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
// ChocoListCtrl = $controller('ChocoListCtrl', {});
ctrl = $controller("ChocoListCtrl", { $scope:scope })
}));
it('should be defined', function (){
expect(ctrl).toBeDefined();
});
it('should have an empty cart', function(){
expect(scope.cart.length).toBeLessThan(1);
});
describe('cart functions', function(){
beforeEach(function(){
scope.addItemToCart();
})
it('should add objects into the cart', function(){
expect(scope.cart.length).toBeGreaterThan(0);
})
});
The error I come back with when running the test:
TypeError: undefined is not an object (evaluating 'choc.id')
I thought I was pushing an object into the array? Am I missing something? Should I include the JSON file if it helps?
Any guidance would help. Thank you!
You're not passing in a parameter to $scope.addItemToCart. So when it tries to read choc it can't because it's undefined.
This line is causing the error:
beforeEach(function(){
scope.addItemToCart(); // No parameter being passed in
})
I create elements (some are SVG Tags, some are simple HTML) with ng-repeat. On changes of the data model - an object that is reset on arrival of new data - there are always elements left behind as detached DOM elements. They are held like this:
The Elements are part of data_user which seems to be part of jquery. This problem occurs at several places on change of data. It seems that watchers are the problem, since they are keeping reference to their expression.
The elements are created e.g. like this:
.directive('svgGraphic', ['$compile', function ($compile) {
return {
restrict: 'E',
replace: false,
link: function (scope, element, attrs) {
var svgData = scope.model.getAttribute("svgGraphic");
var svgDomElement = $(svgData.svg);
scope.layers = svgData.layers;
svgDomElement.append('<svg-layer ng-repeat="layer in layers"></svg-layer>');
element.append($compile(svgDomElement)(scope));
scope.$on("$destroy", function() {
scope.$$watchers = null;
scope.$$listeners = null;
})
}
};
}])
A workaround is to manually delete watchers and listeners as you can see above - what is no good solution I think!
When new data from the server arrives, it is set like this:
$scope.model = model;
$scope.$digest();
Is it a problem to just replace the model data?
Is there any idea how it can happen that angular does not remove listeners on old elements? Angular should delete all the watchers when ng-repeat receives new data and rebuilds all elements.
I found the same issue. I created a Watcher Class, so then with the profiler I am able to count the Watcher instances. I saw that the instances continue increasing while I navigate the app, some of the instances are retained by the data_user cache :(.
Also I fixed the delete of childScopes watcher amd added some metadata to scopes, like a list of childScope.
Here is the angular code that I changed (only the functions that I changed). I hope this help you to found the error, I am still fighting with it :)
function $RootScopeProvider() {
this.$get = ['$injector', '$exceptionHandler', '$parse', '$browser',
function($injector, $exceptionHandler, $parse, $browser) {
var watcherCount = 0;
function Watcher(listener, initWatchVal, get, watchExp, objectEquality, scope) {
this.fn = isFunction(listener) ? listener : noop;
this.last = initWatchVal;
this.get = get;
this.exp = watchExp;
this.eq = !!objectEquality;
this.scope = scope;
this.id = watcherCount++;
}
Watcher.prototype = {
constructor: Watcher
}
function Scope() {
this.$id = nextUid();
this.$$phase = this.$parent = this.$$watchers =
this.$$nextSibling = this.$$prevSibling =
this.$$childHead = this.$$childTail = null;
this.$root = this;
this.$$destroyed = false;
this.$$listeners = {};
this.$$listenerCount = {};
this.$$isolateBindings = null;
this.childsScopes = [];
}
Scope.prototype = {
constructor: Scope,
$new: function(isolate, parent) {
var child;
parent = parent || this;
if (isolate) {
child = new Scope();
child.$root = this.$root;
} else {
// Only create a child scope class if somebody asks for one,
// but cache it to allow the VM to optimize lookups.
if (!this.$$ChildScope) {
this.$$ChildScope = function ChildScope() {
this.$$watchers = this.$$nextSibling =
this.$$childHead = this.$$childTail = null;
this.$$listeners = {};
this.$$listenerCount = {};
this.$id = nextUid();
this.$$ChildScope = null;
};
this.$$ChildScope.prototype = this;
}
child = new this.$$ChildScope();
}
//window.scopes = window.scopes || {};
//window.scopes[child.$id] = child;
this.childsScopes.push(child);
child.$parent = parent;
child.$$prevSibling = parent.$$childTail;
if (parent.$$childHead) {
parent.$$childTail.$$nextSibling = child;
parent.$$childTail = child;
} else {
parent.$$childHead = parent.$$childTail = child;
}
// When the new scope is not isolated or we inherit from `this`, and
// the parent scope is destroyed, the property `$$destroyed` is inherited
// prototypically. In all other cases, this property needs to be set
// when the parent scope is destroyed.
// The listener needs to be added after the parent is set
if (isolate || parent != this) child.$on('$destroy', destroyChild);
return child;
function destroyChild() {
child.$$destroyed = true;
child.$$watchers = null;
child.$$listeners = {};
//child.$parent = null;
child.$$nextSibling = null;
child.$$childHead = null;
child.$$childTail = null;
child.$$prevSibling = null;
child.$$listenerCount = {};
if (child.$parent) {
var index = child.$parent.childsScopes.indexOf(child);
child.$parent.childsScopes.splice(index, 1);
}
console.log("Destroying childScope " + child.$id);
}
}
$destroy: function() {
// we can't destroy the root scope or a scope that has been already destroyed
if (this.$$destroyed) return;
var parent = this.$parent;
console.log('Destroying Scope '+ this.$id);
//delete window.scopes[this.$id];
this.$broadcast('$destroy');
this.$$destroyed = true;
if (this === $rootScope) return;
for (var eventName in this.$$listenerCount) {
decrementListenerCount(this, this.$$listenerCount[eventName], eventName);
}
// sever all the references to parent scopes (after this cleanup, the current scope should
// not be retained by any of our references and should be eligible for garbage collection)
if (parent.$$childHead == this) parent.$$childHead = this.$$nextSibling;
if (parent.$$childTail == this) parent.$$childTail = this.$$prevSibling;
if (this.$$prevSibling) this.$$prevSibling.$$nextSibling = this.$$nextSibling;
if (this.$$nextSibling) this.$$nextSibling.$$prevSibling = this.$$prevSibling;
// Disable listeners, watchers and apply/digest methods
this.$destroy = this.$digest = this.$apply = this.$evalAsync = this.$applyAsync = noop;
this.$on = this.$watch = this.$watchGroup = function() { return noop; };
this.$$listeners = {};
// All of the code below is bogus code that works around V8's memory leak via optimized code
// and inline caches.
//
// see:
// - https://code.google.com/p/v8/issues/detail?id=2073#c26
// - https://github.com/angular/angular.js/issues/6794#issuecomment-38648909
// - https://github.com/angular/angular.js/issues/1313#issuecomment-10378451
this.$parent = this.$$nextSibling = this.$$prevSibling = this.$$childHead =
this.$$childTail = this.$root = this.$$watchers = null;
}
}];
}
Remove the cached SVG data.
Directive Code
(function () {
"use strict";
angular.module('ApplicationModule').directive("ngD3SvgRefreshDirective", ["$rootScope", function ($rootScope) {
return {
restrict: 'AE',
templateUrl: 'pages/directive/D3SvgMyRefereshDirective.html',
scope: {
svgData: "=svgData",
reloadSvg: "=reloadSvg",
},
controller: function ($scope, $sce, $rootScope) {
$scope.$watch('reloadSvg', function (nu, old) {
$scope.init();
}, true);
$scope.init = function () {
if ($scope.svgData && $scope.svgData.layoutURI) {
console.log("data");
if ($scope.svgData) {
// if data is present ###
var svgDiv = angular.element(document.querySelector('#svgDiv')).html("");
d3.xml($scope.svgData.layoutURI, "image/svg+xml", function (xml) {
svgDiv.append(xml.documentElement);
$scope.styleSVGPathsNaddCallBack();
});
}
}
else {
// if data is not present ###
var svgDiv = null;
// selecting all the svg div which already present in browser ###
var svg = d3.select("svg");
svg.selectAll("*").remove();
console.log(svg);
}
};
$scope.styleSVGPathsNaddCallBack = function () {
var svgObject = d3.select('#svgDiv').select('svg');
svgObject.attr("width", "100.0%");
var objColor;
if (true) {
// your requirement logic
}
};
}
};
}]);
})();
Controller
Controller and service combined. Data registery controller function.
$scope.dataRegisteryForMyDirective = function (data, dataFlag) {
if (dataFlag) {
var svgDataMaster = data;
var svgData = {};
$scope.svgData = {};
svgData.layoutURI = data.layoutURI;
$scope.svgData = angular.copy(svgDataMaster);
$rootScope.reloadSvg = !$rootScope.reloadSvg;
}
else {
// making svg data empty, so we can execute the else block of directive --> init() and remove the cached data ###
$scope.svgData = {};
$rootScope.reloadSvg = !$rootScope.reloadSvg;
}
}
Service call and data registory call for directive:
$scope.loadSvgByNumber = function (inputNumber) {
var d = inputNumber;
myService.getData(d).then(function (resp) {
if (resp.status == "FAILURE") {
$scope.svgTempData = [];
$scope.dataRegisteryForMyDirective(resp, false);
// calling to dataRegisteryForMyDirective with false flag
}
else {
$scope.dataRegisteryForMyDirective(resp, true);
// calling to dataRegisteryForMyDirective with true flag
}
});
};
I am building a Knockout viewmodel. The model has some fields like dateFrom, DateTo, Status and so forth. In addition, there is a list of invoices.
The invoices have some pricing information, which is a price object. My main object also have a price object, which should iterate all the invoice objects and find the total price.
My problem is the following:
The code runs smooth, until I add the following in my view:
<label data-bind="text:totalPrice().price().priceExVat"></label>
Here I get an:
TypeError: $(...).price is not a function
Which refers to my:
exVat += $(ele).price().priceExVat;
I don't understand it, because in my each function, I should have the element. The element have a price() function, so why would it not work? Is it some scope issue?
My viewmodel:
function invoice(invoiceDate, customerName, pdfLink, status) {
var self = this;
self.pdfLink = pdfLink;
self.print = ko.observable(0);
self.customerName = customerName;
self.status = status;
self.pdfPagesCount = function () {
return 1;
};
self.invoiceDate = invoiceDate;
self.price = function () {
return new price(1.8, 2.1);
};
}
function price(exVat, total) {
var self = this;
self.currency = '€';
self.total = total;
self.priceExVat = exVat;
self.vatPercentage = 0.25;
self.vatAmount = self.exVat - self.total;
self.priceExVatText = function() {
return self.priceExVat + ' ' + self.currency;
};
}
var EconomicsViewModel = function (formSelector, data) {
var self = this;
self.dateFrom = data.dateFrom;
self.dateTo = data.dateTo;
self.invoices = ko.observableArray([
new invoice('05-05-2014', 'LetterAmazer IvS', "http://www.google.com","not printed"),
new invoice('05-05-2014', 'LetterAmazer IvS', "http://www.google.com", "not printed")
]);
self.totalPrice = function () {
var exVat = 0.0;
$(self.invoices).each(function (index, ele) {
console.log(ele);
exVat += $(ele).price().priceExVat;
});
return price(exVat, 0);
};
};
From what I read, totalPrice is actually a price object, you don't need to put a .price():
<label data-bind="text:totalPrice().priceExVat"></label>
EDIT:
Sorry, there were also problems on your javascript:
self.totalPrice = function () {
var exVat = 0.0;
$(self.invoices()).each(function (index, ele) { //<-- add () to self.invoices to get the array
console.log(ele);
exVat += ele.price().priceExVat; //<-- remove useless jQuery
});
return new price(exVat, 0); //<-- add 'new'
};
Check this fiddle
EDIT2:
To answer robert.westerlund's comment, you could remove $().each and replace with ko.utils.arrayForEach or even simpler use a for loop:
var arr = self.invoices();
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
exVat += arr[i].price().priceExVat;
}
Updated fiddle
I need a couple of directives performing input field cleanup and validation, just like in this question. All of them are the same except for the cleanup and validation functions themselves and the field name. Currently, I'm copying it like
angular.module('myModule')
.directive('validateFoo', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function($scope, element, attrs, ngModel) {
// THESE THREE LINES SHOULD BE ARGUMENTS
var isValid = isValidFoo;
var clean = cleanFoo;
var name = "foo";
element = $(element);
var cleanAndValidate = function(x) {
var y = clean(x);
var ok = isValid(y);
ngModel.$setValidity(name, ok);
return y;
};
ngModel.$parsers.push(cleanAndValidate);
var fix = function() {
var x = element.val();
var y = clean(x);
if (x===y) return y;
var e = element[0];
var start = e.selectionStart;
var end = e.selectionEnd;
element.val(y);
var delta = y.length - x.length;
e.setSelectionRange(start + delta, end + delta);
return y;
};
element.keyup(function() {
fix();
});
}
};
})
which is obviously a bad idea. I guess I should be able to do it using a closure, but I'd also like to preserve the overall structure (all my files start with angular.module followed by a definition). If I had access to the directive name in the body, I could get the three variables from their defining object.
All of them are the same except for the cleanup and validation
functions themselves and the field name
I think you need to add a scope to your custom directive; then you can pass in the functions and field that need to be processed. Something like this:
.directive('validateFoo', function() {
return {
restrict: 'A',
require: 'ngModel',
scope : {
// DEFINE These Arguments in the scope
isvalid : "=isvalid",
clean : "=clean",
name : "=name"
}
link: function($scope, element, attrs, ngModel) {
element = $(element);
// modify this method to access your clean/isvalid/name values in the $scope
var cleanAndValidate = function(x) {
var y = $scope.clean(x);
var ok = $scope.isValid(y);
ngModel.$setValidity($scope.name, ok);
LOG name, x, y, ok
return y;
};
ngModel.$parsers.push(cleanAndValidate);
var fix = function() {
var x = element.val();
var y = clean(x);
if (x===y) return y;
var e = element[0];
var start = e.selectionStart;
var end = e.selectionEnd;
element.val(y);
var delta = y.length - x.length;
e.setSelectionRange(start + delta, end + delta);
return y;
};
element.keyup(function() {
fix();
});
}
};
})
When you use the directive, you can pass in the function and values, sort of like this:
<validate-foo isvalid="isValidFoo" clean="cleanfoo" name="foo" />