How to access dom element in directive from page controller
I am trying to access the element that is in the directive but my controller cannot find it, how do I do this? In the example below, the canvas variable in the MyCtrl controller is null.
Edit: Specifically, my directive is a normal collapse, so the content may vary. For example, I have a view that displays the information that is in the crash that my directive made, and the user can edit it. By the way, the business logic is in the view controller, it handles the loading of the data and sends the modification to the user. The code below has been edited to be more precise.
HTML:
<div ng-controller="MyCtrl">
<collapsible-div title="Open Me">
<canvas id="myCanvas"></span>
</collapsible-div>
</div>
controller:
myApp.controller("MyCtrl",['$scope', function($scope) {
var canvas = document.getElementById('myCanvas');
/* Some code do draw image in my canvas... */
}]);
directive:
myApp.directive('collapsibleDiv', function(){
return {
restrict: 'E',
transclude: true,
replace: true,
scope: {
title: '@'
},
controller: function ($scope, $element) {
/* Some code to make my collapsible div how I want... */
/* This has nothing to deal with content, this directive can store any kind of content */
},
templateUrl: 'collapsible.html'
};
});
Final Solution: Controller shouldn't have access to the dom directive, I can take a more modular approach using a new directive to handle my canvas, now my html looks like this and my controller is empty:
<collapsible-div title="Open Me">
<my-canvas></my-canvas>
</collapsible-div>
source to share
I think you are having trouble understanding the differences between directive and controller. I invite you to delve deeper into these concepts.
As per your specific problem, since you are using a directive, and also because you should be managing all DOM operations in the directive, the place to put it will be your directive's link function.
In this case, something like this:
myApp.directive('directive', function(){
var directive = {
restrict: 'E',
transclude: true,
replace: true,
template: '<div ng-transclude></div>'
link : directiveLinkFunction
};
function directiveLinkFunction( scope, element, attrs ) {
// element -> the DOM element that hold the directive.
// for different selection, use the jQuery lite API
}
return directive;
});
Then you need to use some other strategies for communicating between the controller and the directive, but that's a completely different topic.
Main point -> do all DOM manipulation by directive.
source to share
You can use a link in a directive, then you will have access to the declared element. Example:
myApp.directive('directive', function(){
return {
restrict: 'E',
transclude: true,
replace: true,
template: '<div ng-transclude></div>',
link: function(scope, element, attrs){
//Here you have control over element
console.log(element);
//for example, you can create events on the element
element.bind('click', function(){
//put your code here
});
}
};
});
source to share