2016-04-05 10 views
4

Ich versuche, Passwort passender Mechanismus mit Winkel directive zu bauen und scheint, dass ich etwas vermisse. Ich definierte ng-app und ng-controller, aber ich bekomme immer noch eine Fehlermeldung, dass die module nicht definiert ist.

Jsfiddle here.AngularJs - Modul definiert, aber immer noch "nicht verfügbar" Fehler

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: 
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. 

HTML:

<div ng-app="myApp"> 
    <div class="row" ng-controller='Ctrl'> 
    <form name="form1"> 
     <div class="col-xs-12 col-sm-6 col-md-6"> 
     <div class="form-group"> 
      <input type="password" ng-model="login.password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="5"> 
     </div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-6"> 
     <div class="form-group"> 
      <input ng-model="login.verify" type="password" name="verify" placeholder="Confirm Password" nx-equal="login.password" class="form-control input-lg" tabindex="6"> 
      <div class="error" ng-show="form1.verify.$error.nxEqual">Passwords are not equal</div> 
     </div> 
     </div> 
    </form> 
    </div> 
</div> 

JS:

var app = angular.module("myApp", []); 
app.controller("Ctrl", function($scope){ 

}); 
app.directive('nxEqual', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, elem, attrs, model) { 

     if (!attrs.nxEqual) { 
     console.error('nxEqual expects a model as an argument!'); 
     return; 
     } 
     scope.$watch(attrs.nxEqual, function(value) { 
     model.$setValidity('nxEqual', value === model.$viewValue); 
     }); 
     model.$parsers.push(function(value) { 
     var isValid = value === scope.$eval(attrs.nxEqual); 
     model.$setValidity('nxEqual', isValid); 
     return isValid ? value : undefined; 
     }); 
    } 
    }; 
}); 
+0

Haben Sie den Controller Ctrl definiert? – thegio

+0

Sind Sie sicher, dass Sie die angular controller & directive 'js' Datei auf der Seite angegeben haben? –

+0

Danke, ich habe aber vergessen, es zu aktualisieren. Derselbe Fehler. – undroid

Antwort

3

Sie Ihre Bibliothek Skript zur falschen Zeit zu laden. Ändern Sie in Ihrem JSFiddle-Beispiel onLoad in No Wrap - in <head> (zum Blockieren) oder No Wrap - in <body>. Dies stellt sicher, dass Angular korrekt geladen wurde und wir sind in der Lage, unseren Code zu schreiben.

JSFiddle Link - aktualisiert Geige


Check out this answer: When do you put Javascript in body, when in head and when use doc.load? [duplicate], die ich auf externe Bibliothek Skript Laden Platzierung ganz einfach gefunden. In Zukunft wird es die Norm sein, zumindest wenn man JSFiddle-Beispiele macht.

+0

OMG !! guter Fang ... schön, dich nach langer Zeit zu sehen .. +1 –

+1

Beschäftigt wie immer mein Freund :) @ PankajParkar – scniro

Verwandte Themen