Recently, I started working with Angular and came across an issue with a directive. In the linkFunction, I used attributes["attribute-value"] to set the scope to a specific value. To my surprise, when trying to access element.html(), I didn't get the inner HTML of the directive.
.directive("sfGroupbar", function () {
var linkFunction = function (scope, element, attributes) {
scope.text = element.html();
scope.attr = attributes["text"];
};
return {
restrict: 'E',
templateUrl: "controls/groupbar.html",
link: linkFunction,
scope: {}
};
In my view, I implemented the directive as follows...
<sf-groupbar warning="50" error="80" text="Web Server">Some Text</sf-groupbar>
Within groupbar.html, I structured the code like this...
<div ng-controller="groupbarController">
{{text}} <br />
{{attr}}
</div>
I was anticipating to see "Some Text" and "Web Server" displayed as output. However, I only got "Web Server" as the output. Instead of "Some Text," the result showed the following...
<div ng-controller="groupbarController">
{{text}} <br />
{{attr}}
</div>