AngularJS - trying to create custom directive for url slug

Question

I'm new to Angular and trying to figure out how to watch for a title to be entered in an input so that I can use the value for a url slug.

I am trying to create a custom directive, but am unsure how to watch for when the title field has input.

HTML

<input ng-model="post.title" type="text" class="form-control"></br>
<slug></slug>

Slug directive

Posts.directive('slug', function() {
    return {
        restrict: 'E',
        scope: {},
        link: function(scope, element, attrs) {
            scope.$watch('post.title', function() {
                console.log('title has been entered');
            });
        }
    }
});

This returns 'title has been entered' immediately in the console log after refreshing the page, which isn't what I want.

Also, I don't want to completely bind the title and slug as one model, I want to capture the value that is initially typed into the title field and then use it as the slug, but allow the slug to be edited as its own model value.

Thanks for any advice, I've been stuck on this for awhile.

I think you want a custom filter docs.angularjs.org/guide/filter — JeremyWeir
– JeremyWeir, Commented Jun 12, 2014 at 23:19
No It's not the output of the data that I am confused about, I know how to lowercase and remove spaces, its capturing the title input and making that captured value editable that I am confused about.. — Mitch
– Mitch, Commented Jun 12, 2014 at 23:24
Sorry, missed that last part about editing the slug. That's going to be a frustrating UI. What happens if they edit the title after editing the slug? — JeremyWeir
– JeremyWeir, Commented Jun 12, 2014 at 23:30
What do you mean by initially typed? How do you know when they are done typing the title? — JeremyWeir
– JeremyWeir, Commented Jun 12, 2014 at 23:32

Rob · Accepted Answer · 2016-02-01 21:52:13Z

2

Your scope.$watch('post.title', ... ) is not working because you created an isolated scope for directive, and it has no access to scope with post.

About directive - it would be something like:

HTML

<input type="text" ng-model="name"/>
<input type="text" ng-model="slug" slug="name"/>

JS

.directive('slug', function () {
    return {
      restrict: 'A',
      scope: {
        slug: '=',
        ngModel: '='
      },

      link: function (scope) {
        scope.$watch('slug', function (newValue, oldValue) {
          var trExp = /[\/\s]+/gi;
          oldValue = (oldValue || '').replace(trExp, '-');
          newValue = (newValue || '').replace(trExp, '-');
          if (scope.ngModel === oldValue || !scope.ngModel) {
            scope.ngModel = newValue;
          }
        });
      }
    };
  });

http://plnkr.co/edit/GPx9uvz84F9DJTSb49c7

Also there is a check: if previous slug value was auto-generated(if not - if will not be updated).

Another thing that you will probably need is - slug validation, for this:

require ng-model controller
add watch for slug value with validation logic, that will call $setValidity on model controller.

edited Feb 1, 2016 at 21:52

Rob

12.9k4 gold badges44 silver badges57 bronze badges

answered Jun 13, 2014 at 0:01

Bogdan Savluk

6,3121 gold badge32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mitch Over a year ago

This isn't what i'm looking for, I don't want the slug and title bound together, I just want to grab the initial values in the title field and turn that into the slug model, then allow that value to be edited and not connected to the title

Bogdan Savluk Over a year ago

@MitchGlenn if I understand what you want to achive - replace content of link with something like: scope.ngModel = scope.slug.replace(/[\/\s]+/gi)

wataru · Accepted Answer · 2014-10-12 08:16:38Z

1

I was also looking for slug generator. And this is what I wanted. Take a look. http://paulsmith.github.io/angular-slugify/

answered Oct 12, 2014 at 8:16

wataru

1,0901 gold badge11 silver badges19 bronze badges

Collectives™ on Stack Overflow

AngularJS - trying to create custom directive for url slug

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related