Currently, I am following a tutorial on custom components from EggHead.io and encountered an issue. The problem arises when declaring a directive like this:
angular.module('myApp', [])
.directive('myDir', function(){
return {
restrict: "E",
controller: "myController",
link: function(scope, element, attrs) {
scope.foo = element.text();
},
templateUrl: "myDirTemplate.html"
}
});
The template looks like this:
<div>The value is: {{foo}}</div>
And the directive is being used as follows:
<html>
...
<myDir>Bar</myDir>
...
</html>
In the link function, element refers to the template content.
If I omit the templateUrl, element points to the main view content instead of the template. My goal is for the directive to take the text "Bar" and insert it into the {{foo}}, resulting in:
<div>The value is: Bar</div>
Unfortunately, I'm unsure how to prevent Angular from always selecting the template's element.
Any suggestions?