At this moment, I have a functional Angular app that is working properly. However, I am currently performing DOM manipulation within my controller instead of utilizing directives as recommended. My concern is, how can I correctly implement this functionality using directives?
For instance, consider the following simple example:
<div id="container1"></div>
<button type="button" ng-click="changeSize(1)">Small</button>
<button type="button" ng-click="changeSize(2)">Medium</button>
<button type="button" ng-click="changeSize(3)">Large</button>
This setup triggers the changeSize method in my controller which looks something like this:
$scope.changeVideoSize = function(size) {
switch (size) {
case 1:
resizeDiv("container1", "320px" , "240px");
case 2:
resizeDiv("container1", "640px" , "480px");
case 3:
resizeDiv("container1", "1280px" , "960px");
}
}
function resizeDiv(id, width, height) {
var elem = document.getElementById(id);
elem.style.height = height;
elem.style.width = width;
}