CODEWITHSUNDEEP
angularjsusing-directives
DaveC426913
DaveC426913

Reputation: 2046

angular implementing a directive

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/ )

Upvotes: 1

Views: 57

Answers (2)

gyc
gyc

Reputation: 4360

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>

Upvotes: 0

Felix
Felix

Reputation: 10078

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>

Upvotes: 1

Related Questions