CODEWITHSUNDEEP
angularjs
Joe.wang
Joe.wang

Reputation: 11793

Why custom directive doesn't work

I am trying to implement me custom directive of AngularJS.

Let's say the code look like below.

<!DOCTYPE html>
<html lang='en' ng-app='testApp'>
    <head>
        <meta charset='utf-8'/>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'/>
        <meta name='viewport' content='width=device-width, initial-scale=1'/>
        <script src="angular.js"></script>
        <script src="searchinput.js"></script>
    </head>
    <body>
        <searchInput></searchInput>
    </body>
</html>

searchInput.js

var testApp = angular.module('testApp', []);
testApp.directive("searchInput", function() {
    return {
          replace:true,
          restrict: 'AE',
          template: '<h3>Hello World!!</h3>'
      }
});

Unfortunately I didn't see the expected result . Does anyone know anything I missed ? thanks.

Upvotes: 1

Views: 128

Answers (2)

vipulnj
vipulnj

Reputation: 135

In my case, even having a hyphen didn't help. The entire tag had to be in lowercase (on angularjs/1.3.16).

My custom directive textReplace did not work initially. Then, I checked with text-replace, which also did not work. Finally, checked with textreplace, which worked.

Upvotes: 0

ryeballar
ryeballar

Reputation: 30088

change

<searchInput></searchInput>

to

<search-input></search-input>

check it out in the AngularJS documentation for more details

Upvotes: 6

Related Questions