CODEWITHSUNDEEP
javascriptangularjsyeomandirective
Marius Miliunas
Marius Miliunas

Reputation: 1063

Yeoman Angularjs How to Implement Directive

I'm trying to get my feet off the ground with Yeoman + Angular and going through the tutorials, I can't get even the most basic directives to fire, even when I try them exactly the same as in the tutorials.

Could someone please lend some insight as to what I'm missing, I've been struggling with this for the past 2 days


HTML template - ng-resize is the intended directive

<body ng-app="mvmdApp">
....
<div ng-mousemove="onMouse($event)" ng-resize="" class="youtube-cover ng-scope">
  <div class="youtube-unit"></div>
</div>



// controllers/youtube.js
'use strict';
angular.module('mvmdApp').controller('YoutubeCtrl', function($scope) {
  console.log('hi');// fires

  return $scope.onMouse = function(e) {}// fires



// directives/resize.js
'use strict';
angular.module('mvmdApp', []).directive('ngResize', function($window) {
  return function(scope) {
    return console.log('directive');// does not fire
  };
});

The strange thing is that whenever I even call angular.module('mvmdApp', []) like so from the directive script, it blocks the view from rendering.

edit: Also I noticed that when I load the directive before all the other scripts, it doesn't block the html from rendering, but it still doesn't trigger the directive. I don't know if/how the load order of angular scripts matters as I don't know where to find that.

Upvotes: 0

Views: 2092

Answers (2)

rchawdry
rchawdry

Reputation: 1266

You are declaring the module multiple times. You can simplify this by doing the following:

In app.js:

'use strict';

var myApp = angular.module("mvmdApp", []);

myApp.config(function($routeProvider, $locationProvider) {
  ...
});

In youtube.js:

'use strict';
myApp.controller('YoutubeCtrl', function($scope) {
  ...
});

An in resize.js:

'use strict';

myApp.directive('resize', function($window) {
  ...
});

Updated plunker at http://plnkr.co/edit/Im4SpcyH4cIem6TDWZaG?p=preview. Also, I would refrain from calling the directive "ng-resize" as the ng prefix is usually used by the angular team. In this case, the directive is simply "resize".

Upvotes: 1

Chandermani
Chandermani

Reputation: 42659

This may not solve your issue but one mistake i see is

angular.module('mvmdApp', []) been declared at multiple places, resize.js and app.js. This format declaration creates a new module everytime with this name.

This should be called once only from app.js. In resize.js it should be angular.module('mvmdApp')

Upvotes: 0

Related Questions