4

angular を使用してパスワード マッチング メカニズムを構築しようとしていますがdirective、何かが足りないようです。定義ng-appしng-controllerましたが、まだ定義されていないというエラー メッセージが表示moduleされます。 ここで

Jsfiddle 。

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;
      });
    }
  };
});
4

1 に答える 1

3

ライブラリ スクリプトを間違ったタイミングで読み込んでいます。JSFiddle の例では、(ブロック用) またはに変更onLoadします。これにより、Angular が適切に読み込まれ、コードを記述できるようになります。No Wrap - in <head>No Wrap - in <body>

JSFiddle リンク- 更新されたフィドル

この回答を確認してください:いつ Javascript を本体に、いつ頭に、いつ doc.load を使用しますか? [複製]外部ライブラリスクリプトの読み込み配置については非常に簡単であることがわかりました。今後は、少なくとも JSFiddle の例を作成するときは、それが標準になります。

于 2016-04-05T16:20:04.013 に答える