1

Frameworks that hide their complexities from the developer are difficult to debug. Angular's directives simply work - or they don't. I relaly don't know how you debug them.

I'm trying to get a directive going but I don't know what I'm missing.

Here is the reference in my index.cshtml:

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

I know it's loaded, I put a breakpoint in it in Chrome - and I see the breakpoint listed:

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

But it never hits that line - never breaks, never prints out 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>

What am I doing wrong?

(I'm trying to implement this: http://jsfiddle.net/jamseernj/6guy3sp9/ )

2
  • Try changing ng-valid-number to valid-number in your input. Jun 16, 2016 at 20:14
  • You forgot angular.module('WizmoApp', []);
    – gyc
    Jun 16, 2016 at 20:43

2 Answers 2

1

your html tries to invoke the directive ng-valid-number, but your directive is validNumber (no ng). So, your html should be

<input type="text" class="form-control" name="Value" ng-model="listingVm.form.Value" required valid-number>
2
  • Yah. It was originally valid-number. ng-valid-number is just a shot in the dark because nothing's working. Jun 16, 2016 at 20:20
  • Check that your HTML includes the right app <ng-app="WizmoApp"> and the app is defined (you will get an error in F12 if it isn't, but directive refers to it); and of course that angular itself is included as well
    – Felix
    Jun 16, 2016 at 20:25
0

A directive returns an object. Javascript code is put inside a link, compile or controller function.

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

Put your console.log in the appropriate place and it will run. (EDIT: I'm surprised the code is even ran in the middle of the directive... use link instead)

You forgot to register your module first.

(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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.