AngularJS: Simply passing a value to a directive's template

StackOverflow https://stackoverflow.com/questions/23661647

  •  22-07-2023
  •  | 
  •  

Question

I'm having a very basic problem: I cannot pass a value, or anything else, to a directive's template and have it display in the template, despite having tried many examples. I have created a punker to demonstate the problem, after boiling it down to the most basic example.

Plunker example

<!doctype html>
<html ng-app='myapp'>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    a<exampleDirective fancyname="Hello">-</exampleDirective>b
  </body>
</html>

angular.module('myapp', [])
    .directive('exampleDirective', function() {
        return {
            restrict: 'E',
            scope: {
                fancyname: "@"
            },
            template: '1<div><i>2{{fancyname}}2</i></div>1'
        };
    });

It seems that the template is not loading at all, though at one point it was and {{fancyname}} was not showing the value of "Hello".

Any help to this directive NOOB is greatly appreciated. Thank you!

Était-ce utile?

La solution

Simple and easy mistake when u r learning...

angular.module('myapp', [])
    .directive('exampleDirective', function() {
        return {
            restrict: 'E',
            scope: {
                fancyname: "@"
            },
            template: '1<div><i>2{{fancyname}}2</i></div>1'
        };
    });

Equals this HTML

<example-directive fancyname="Hello"></example-directive>

Your forked plunker

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top