Sunday 15 March 2015

angularjs - Checkbox Behavior, in directive or in controller? -



angularjs - Checkbox Behavior, in directive or in controller? -

i implemented behavior of master checkbox (in table header) , entry checkboxes (in table rows), here's html:

<div class="container main" ng-controller="paramctrl param"> . . . <form> <thead> <input type="checkbox" ng-model="param.mastercheckbox" ng-click="param.clickmaster()" /> </thead> <tbody> <tr ng-repeat="entry in param.entries track $index"> <input type="checkbox" ng-model="parameter.checked" ng-click="param.click($index)" /> </tr> </tbody> </form> </div>

the behavior of master checkbox , row checkboxes implemented within controller (not controller in directive). here js file (since working, removed logic within functions already):

app.controller('paramctrl', function() { this.function1 = function() {...}; this.function2 = function () {...}; . . . this.clickmaster = function(){...}; this.click = function(index){...}; });

i've read many times dom manipulations within controller not advisable, should within directive. i'm still not yet understanding directive concepts in angularjs. i'm not sure either if checkbox behavior falls under dom, kindly verify if putting in controller right. how implement directive version of clickmaster , click functions if putting these in controllers wrong (or bad practice)?

app.controller('paramctrl', function() {...}) uses this works fine. however, whenever alter controller with

app.controller('paramctrl', ['$scope', function($scope) {...}])

or

app.controller('paramctrl', function($scope) {...}])

and replace instances of this $scope in source code, code not working anymore. in debugging in chrome dev tools, $scope (in both cases of alteration) has value childscope. in code examples have seen, utilize $scope instead of this. explain why working this , not $scope?

thanks.

i assume thing in functions setting values on model checkboxes either checked or unchecked? in case approach valid.

dom manipulation means changing construction of dom tree (the model behind html) within javascript. examples of dom manipulation include creating new dom elements (with document.createelement(<element name>)´ , using query selector retrieve dom element (either jquery or built ins likedocument.getelementbyid();´

the thought restrict dom manipulation directives these intended enhance html , hence semantically right place set them (there other reasons avoiding memory leaks).

angularjs checkbox

No comments:

Post a Comment