CODEWITHSUNDEEP
angularjs
Mike Rifgin
Mike Rifgin

Reputation: 10745

Angular directive not getting instantiated

I'm trying to create a simple popover directive in angular but it doesn't seem to be working. I'm not sure why but the directive doesn't seem to get instantiated - I'm not even getting the console.log back:

var core = angular.module('core', []);
core.directive('popover', function(){
    return {
        restrict: 'A',
        link: function (scope, el, attrs) {
        var isTouchDevice = !!("ontouchstart" in window);
        console.log(isTouchDevice);
        if (isTouchDevice) {
            el.bind("touchstart", function (e) {
                console.log('on mobile');
            });
        } else {
           el.bind("mouseover", function (e) {
              console.log('on desktop');
          });   
        }
      }
   };
});

Using it with the following html:

<div ng-app>
  <div popover>hover me</div>
</div>

http://jsfiddle.net/nv8eq7n8/

Upvotes: 0

Views: 475

Answers (2)

Sergio Marcelino
Sergio Marcelino

Reputation: 1136

You missed the app's name: <div ng-app="core">

It seems the code isn't loading, i had to change the html to:

<script>
    var core = angular.module('core', []);
    core.directive('popover', function() {
        return {
        restrict: 'A',
        link: function (scope, el, attrs) {
            var isTouchDevice = !!("ontouchstart" in window);
            console.log(isTouchDevice);
            if (isTouchDevice) {
              el.bind("touchstart", function (e) {
                  console.log('on mobile');
              });
            } else {
               el.bind("mouseover", function (e) {
                  console.log('on desktop');
              });   
            }
        }
        };
    });
</script>
<div ng-app="core">
    <div popover>hover me</div>
</div>

Upvotes: 2

Shomz
Shomz

Reputation: 37701

You need not to wrap the script inside the document on jsfiddle (see the upper-left menu, I set it to no wrap - in <body>). Otherwise, the DOM would be loaded before the JS, and thus you get the missing module error.

And yes, as the other answer said, you need to specify the app name.

Here it is, working all fine: http://jsfiddle.net/wx8ydotr/

Upvotes: 2

Related Questions