javascript - Function launched too many times on AngularJS -
i have serious performance problem.
i want show details in list, function called many times.
you can try demo here
here html code :
<div ng-controller="myctrl ctrl"> <p>watch console, click on letter. why "myterious" function launched many time ???</p> <button ng-click="ctrl.setvalue('b')">display b</button> <button ng-click="ctrl.setvalue('c')">display c</button> <button ng-click="ctrl.setvalue('d')">display d</button> <div ng-repeat="item in ctrl.vitals track $index"> <p ng-click="ctrl.toggledetail($index)" ng-bind="item.name"></p> <div ng-show="ctrl.myterious(item.name, ctrl.value)">this should display under {{item.name}}</div> <div ng-show="ctrl.display[$index]">...</div> <br> </div> </div> and there javascript code :
var app = angular.module('myapp',[]); app.controller('myctrl', [function() { var self = this; self.vitals = [ {name:'a'}, {name:'b'}, {name:'c'}, {name:'d'}, {name:'e'}, {name:'f'}, {name:'g'}, {name:'h'}, {name:'i'}, {name:'j'}, {name:'k'} ]; self.display = []; self.toggledetail = function(id) { console.log("toggle launched"); self.display[id] = !self.display[id]; }; self.value = 'b'; self.setvalue = function (val) { self.value = val; } self.myterious = function (a, b) { console.log(a + ' ' + new date().gettime()); if (a === b) { return true; } else { return false; } } }]); i'd know where problem , how fix it, because simplification of original code.
the reason of function calls ng-show binding. every time dom updated, runs mysterious function determine whether or not display item. in order avoid of these function calls, ng-show bindings should based on static. see modified example below:
self.vitals = [ {name:'a', mysterious: false}, {name:'b', mysterious: true}, {name:'c', mysterious: false}, {name:'d', mysterious: false}, {name:'e', mysterious: false}, {name:'f', mysterious: false}, {name:'g', mysterious: false}, {name:'h', mysterious: false}, {name:'i', mysterious: false}, {name:'j', mysterious: false}, {name:'k', mysterious: false} ]; self.setvalue = function (val) { self.vitals.foreach(function(obj) { obj.mysterious = obj.name == val }) self.value = val; } <div ng-repeat="item in ctrl.vitals track $index"> <p ng-click="ctrl.toggledetail($index)" ng-bind="item.name"></p> <div ng-show="item.mysterious"> should display under {{item.name}} </div> </div> without knowing specifics of goal, there typically nothing wrong lightweight function executing determine dom visibility. time have seen become problem when gets out of control. if have legitimate business reason calculating dom's visibility dynamically, use sparingly possible. otherwise, best design visibility logic based on static (non-function) bindings.
Comments
Post a Comment