CODEWITHSUNDEEP
angularjs
SamSamet
SamSamet

Reputation: 415

Access Angular Controller Defined Element

Is there a way to access the div which is in the controller div or the controller defined div without defining them with and class or id JUST using the $scope.

<div ng-controller="gridController">
    <div></div>    // < --  I want to access this element 
</div>

To be a bit more specific does angular saves and gives access to the element DOM info which the ng-controller was called ?

Upvotes: 0

Views: 1880

Answers (2)

fluoresce
fluoresce

Reputation: 452

You can access the element the controller is defined on by injecting the angular variable $element into your controller

angular.module('myApp')
  .controller('SomeCtrl',['$scope', '$element', function($scope, $element) {

  $scope.buttonClick = function () {
    $element.find('div').css('background-color', '#f00');
  }
}]);

If jQuery is included in your project, $element will be a jQuery object of the element your controller is defined on (the outer div in your example). You can use standard jQuery directives to access its sub elements. Accessing an unnamed child div would require you to know its position, or use some other criteria to target it.

If jQuery is not installed, angular includes jqlite which is a subset of jQuery allowing you to use most jQuery selectors to target elements, but lacking most of the other manipulation features.

However, it is generally considered bad practice to access, and especially manipulate the DOM from within a controller. Because of the way jQuery binds variables to html, if you make changes to the DOM from certain functions, angular may not pick these changes up and overwrite them when it next does a binding cycle. To avoid this, you should do most of your DOM manipulation from inside an angular directive. Sometimes however, its just easier to do it from the controller... If you are going to do this, you should learn about $apply and $digest.

Upvotes: 0

Enzey
Enzey

Reputation: 5254

A controller has no concept of the DOM, and it should stay that way or you run the very likely risk of writing untestable code. This is a part of the separation of concerns in the angular framework. A controller can be bound to multiple different elements or even to the controller function of different directives and there would be know way to tell them apart.

If you are attempting to do anything to the DOM you should be using a directive.

Given more information about what you want to accomplish with the element in question more guidance to reach your goal could be given.

Upvotes: 1

Related Questions