Today I am diving into the world of directives and came across the compile and link functions. However, I am encountering an issue with my link function that is not working as expected.
Below is my code snippet:
<body ng-app="myModule" ng-controller="myController">
this is directive<br />
<input id="inputTextColor" ng-model="color" type ="text"/>{{color}}
<br />
<hello> oldertext oldertext </hello>
</body>
<script>
var myModule = angular.module("myModule", []);
myModule.directive("hello", function () {
var directive = {};
directive.restrict = 'E';
directive.template = '<b>hi its me <span ng-transclude></span></b>';
directive.transclude = true;
directive.compile = function (element, attributes) {
element.css('border', 'solid 1px black');
var linkfunction = function ($scope, element, attributes) {
element.css('background-color', $scope.color);
}
return linkfunction;
}
return directive;
});
myModule.controller("myController", function ($scope) {
$scope.color = "red";
});
</script>
My objective here is to dynamically update the background color of my directive based on the text entered in the textbox, since the textbox is bound to my scope.color.