Question

隐藏开发人员复杂性的框架很难调试。 Angular的指令只是起作用 - 或者它们不起作用。我非常不知道你是如何调试它们的。

我正试图获得指令，但我不知道我错过了什么。

这是我的index.cshtml中的引用：

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

我知道它已加载，我在Chrome中设置了一个断点 - 我看到了断点：

breakpoints: validNumber.js:7 console.log("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>

角度实施指令

2 个答案: