はディレクティブを実装しています

Question

複雑さを開発者から隠すフレームワークはデバッグするのが難しいです。 Angularのディレクティブは単純に機能しますが、そうではありません。私はあなたがそれらをどのようにデバッグするのか分かりません。

私は指示を出そうとしていますが、私は何が欠けているのかわかりません。ここで

は私index.cshtmlで参照です：

<script src="~/Content/js/apps/store/directives/validNumber.js"></script> 

私は、それがロードされています知っている、私はChromeで、その中にブレークポイントを置く - と私は、ブレークポイントが記載されている参照してください。

breakpoints: validNumber.js:7 console.log("foo"); 

しかし、その行にぶつかることは決してありません。決して壊れず、決してfooをプリントアウトしません。

validNumber.js：

(function() { 
    'use strict'; 
    angular 
     .module('WizmoApp') 
     .directive('validNumber', function() { 
      console.log("foo"); 
      return { 
      }; 
     }); 
})(); 

がedit_listing.html：

<input type="text" class="form-control" name="Value" ng-model="listingVm.form.Value" required ng-valid-number> 

は私が間違って何をしているのですか？

（私はこれを実装しようとしています： http://jsfiddle.net/jamseernj/6guy3sp9/ ）を

Answer 1

あなたのhtmlは、ディレクティブng-valid-numberを起動しようとしますが、あなたのディレクティブはvalidNumber（なしNG）です。だから、あなたのhtmlは

<input type="text" class="form-control" name="Value" ng-model="listingVm.form.Value" required valid-number> 

Answer 2

でなければなりません。 Javascriptコードは、リンク、コンパイル、またはコントローラ機能の中に置かれます。

https://docs.angularjs.org/guide/directive

適切な場所にはconsole.logを入れて、それが実行されます。 （編集：コードが指示の途中で実行されていても驚いています...代わりにリンクを使用してください）

モジュールを最初に登録するのを忘れました。

(function() { 
 
    'use strict'; 
 
     angular.module('WizmoApp', []); 
 
     angular 
 
     .module('WizmoApp') 
 
     .directive('validNumber', function() { 
 
      console.log("foo"); 
 
      return { 
 
      } 
 
     }); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="WizmoApp"> 
 
    <input type="text" class="form-control" name="Value" ng-model="listingVm.form.Value" required valid-number> 
 
</div>