Angular 实现指令-解网

问：

向开发人员隐藏其复杂性的框架很难调试。Angular 的指令只是工作 - 或者它们不起作用。我大概不知道你是怎么调试它们的。

我试图让指令继续下去，但我不知道我错过了什么。

以下是我的 index.cshtml 中的引用：

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

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

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

但它永远不会触及那条线——从不中断，从不打印出 foo。

有效编号.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/ )

angularjs 使用指令

评论

0赞 Gabriel Hobold 6/17/2016

尝试在输入中更改为。ng-valid-numbervalid-number

0赞 gyc 6/17/2016

你忘记了angular.module（'WizmoApp'， []）;

答：

1赞 Felix 6/17/2016 #1

你的 HTML 尝试调用指令，但你的指令是（no ng）。所以，你的html应该是ng-valid-numbervalidNumber

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

评论

0赞 DaveC426913 6/17/2016

是的。它最初是有效编号。ng-valid-number 只是黑暗中的一枪，因为没有任何效果。

0赞 Felix 6/17/2016

检查您的 HTML 是否包含正确的应用，并且应用已定义（如果不是，您将在 F12 中收到错误，但指令引用了它）;当然，angular 本身也包括在内<ng-app="WizmoApp">

0赞 gyc 6/17/2016 #2

指令返回一个对象。Javascript 代码被放在链接、编译或控制器函数中。

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

将控制台 .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>

上一个：Angular JS：如何从指令外部打开选项卡

下一个：嵌入内容中的角度范围修改