Angular directive not compiling, failing silently

Question

I tried to define my first directive in angular today. This is what it looks like:

app.js:

var frameApp = angular.module('frameApp', [
    'ngRoute',
    'frameServices',
    'frameFilters',
    'frameDirectives',
    'frameControllers'
]);


console.log("1");
frameApp.directive('ngEnter', [function(){
    console.log("2");
    return {
        link: function($scope, iElm, iAttrs, controller) {
            console.log("3");
        }
    };
}]);

When I load the page I only see the "1" printed in the console.

it is used in the code like this:

<input
    type="text"
    placeholder="username"
    ng-model="username"
    ng-enter="createUser()">

my index.html looks like this:

<!DOCTYPE html>
<html ng-app="frameApp" ng-controller="PageCtrl">
<head>
    <!-- lots of irrelevant scripts -->
    <!-- config and initialization -->
    <script type="text/javascript"
        src="app/app.js">
    </script>
    <script type="text/javascript"
        src="app/app.routes.js">
    </script>

    <title>{{ title }}</title>
</head>
<body>

    <ng-include
        src="'app/partials/header.html'"
        onload="onHeaderLoaded()">
    </ng-include>

    <ng-include
        src="'app/partials/loginbox.html'"
        ng-if="loginVisible">
    </ng-include>

    <div id="content" ng-view></div>

</body>
</html>

I initially tried to get the directive from this question working: How to use a keypress event in AngularJS?

How do I find out why it doesn't work and fix it?

UPDATE

I found the problem, it was a second declaration of frameApp above my routes declaration. If you have a similar problem, check that you aren't overriding any modules because angular doesn't throw any errors if you do.

can you create a plunkr that demonstrates the problem? – Yaron Schwimmer Apr 27 '15 at 13:56 — Yaron Schwimmer, Apr 27 '15 at 13:56

Pankaj Parkar · Accepted Answer · 2015-04-27T13:01:19.427

0

You should remove ''(blank) dependency injection which would throw an error, You need to replace frameApp.directive('ngEnter', ['', function(){ with frameApp.directive('ngEnter', [function(){

Directive

console.log("1");
frameApp.directive('ngEnter', [function(){
    console.log("2");
    return {
        link: function($scope, iElm, iAttrs, controller) {
            console.log("3");
        }
    };
}]);

Update(OP made above changes)

The above directive should work

Working Plunkr

edited Apr 27 '15 at 13:01

answered Apr 27 '15 at 12:50

Pankaj Parkar

134,766
23
234
299

tried that, did not change the behavior. should the previous version have thrown an error? maybe I have to move it into a module or something? – steve Apr 27 '15 at 12:57
@steve there must be some error in console..do look at my updated answer – Pankaj Parkar Apr 27 '15 at 13:01
for some reason angular refused to throw errors if I used "frameApp.directive" or "frameDirectives.directive". It works if I attach the directive to frameControllers for some reason. – steve Apr 27 '15 at 13:18
could you please reproduce the issue in plunkr – Pankaj Parkar Apr 27 '15 at 13:32
I wasn't able to reproduce it. I tried a few things and found out that adding a nonexistent dependency to my app module does not throw an error. I'm beginning to think something is wrong with my angular setup. – steve Apr 27 '15 at 13:42
I identified the problem as an ID10T error. I declared frameApp twice and only the first one depended on frameDirectives. sorry for wasting your time. can I close the Questions somehow or should I accept your answer? – steve Apr 27 '15 at 14:17
yes..you can accept my answer..& if you want feel free to edit.. Thanks :) – Pankaj Parkar Apr 27 '15 at 14:23

Angular directive not compiling, failing silently

1 Answers1