Question

我是Angular的新手，并试图找出如何在输入中输入标题，以便我可以将该值用于url slug。

我正在尝试创建自定义指令，但我不确定如何在标题字段输入时查看。

HTML

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

Slug指令

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

此返回＆＃39;标题已输入＆＃39;刷新页面后立即在控制台日志中，这不是我想要的。

另外，我不想将标题和slug完全绑定为一个模型，我想捕获最初键入标题字段的值，然后将其用作slug，但允许slug被编辑为自己的模型值。

感谢您的任何建议，我已经坚持了一段时间。

Answer 1

您的scope.$watch('post.title', ... )无法正常工作，因为您为指令创建了一个独立的范围，并且无法使用post访问范围。

关于指令 - 它将类似于：

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

还有一个检查：如果先前的slug值是自动生成的（如果没有 - 如果不会更新）。

您可能需要的另一件事是 - slug验证，为此：

需要ng-model controller
使用验证逻辑为slug值添加监视，这将在模型控制器上调用$ setValidity。

Answer 2

我也在寻找slug发电机。这就是我想要的。看一看。 http://paulsmith.github.io/angular-slugify/

AngularJS - 尝试为url slug创建自定义指令

2 个答案: