AngularJs controller add all html elements from template

Question

I want to add all my elements from my template to my $scope. I want them to be accessible like c# or java elements in the code.

for example if i have this HTML template

<div ch-options-div id="chOptions" ng-controller="chOptionsCtrl">
    <span>Options</span>
    <div id="chOptionsWrapper">

        <div id="div1">
        </div>

        <div id="div2"></div>
        <div id="div3"></div>
    </div>
</div>

And here is a possible controller:

var chOptions = angular.module('chOptions',[]);

chOptions.controller('chOptionsCtrl', function ($scope,$document,$element) 
{     
    //select all elements by id and add them to scope
    $scope.chOptionsWrapper = document.getElementById('chOptionsWrapper');
    //or with jquery
    $scope.div1 = $('#div1')
}

Is there a best case to do this or is there a good way to add all my HTML elements to the scope ? I want clean "object oriented" javascript code.

You can access anything within the controller using selectors. eg $('#div1'). Why are you doing this though? If you are going to manipulate the elements, its best to do it in a directive — RSquared
– RSquared, Commented Feb 5, 2015 at 23:33
That would be the opposite of a clean "object-oriented" code. You should respect the Model-View-Controller approach, where all the View stays in your HTML and is updated according to your model (the $scope). — floribon
– floribon, Commented Feb 5, 2015 at 23:36
okay i have a background color of a div and want to manipulate it because it is used as a color preview how would that be done without knowing the element ? can i acces div1 or div2 in my directive "ch-options-div" ? — Bongo
– Bongo, Commented Feb 5, 2015 at 23:39
Theres multiple ways to do that. If you do no want to go down the directive path, you can do it the 'angular way' by manipulating a model and applying it to a property like ng-class. Here is an example: jsfiddle.net/skriblez/dqfwvyso — RSquared
– RSquared, Commented Feb 6, 2015 at 0:02
Well, in that case it may be best to do it in a directive, here is an updated fiddle with the directive now doing the manipulation dependent on the RGB colour passed through: jsfiddle.net/skriblez/dqfwvyso/2 — RSquared
– RSquared, Commented Feb 6, 2015 at 0:32

RSquared · Accepted Answer · 2015-02-06 02:57:39Z

1

You can use a directive to achieve this.

.directive('box', function () {
    return {
        scope: {
            rgb: '='
        },
        link: function (scope, elem, attrs) {
            scope.$watch('rgb', function () {
                angular.element(elem).css('background-color', 'rgb(' + scope.rgb + ')');
            });
        }
    }
}

Here is an example of you to use the directive: http://jsfiddle.net/skriblez/dqfwvyso/4/

edited Feb 6, 2015 at 2:57

answered Feb 6, 2015 at 1:05

RSquared

1,20811 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJs controller add all html elements from template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related