Question

我希望更改我在表单字段中使用的ng-show指令中定义的功能，以显示表单字段的问题。

例如：

<span class="help-inline" ng-show="showError(schoolSignup.last_name, 'required')">This field is required</span>

其中schoolSignup.last_name是对该字段的模型控制器的引用，'required'是我正在寻找的验证属性。

在控制器中定义为

$scope.showError = function(ngModelController, error) {
   return ngModelController.$dirty && ngModelController.$error[error];
 };

我一直在撞墙试图弄清楚如何将其移到指令中，所以我不必在每个控制器中重新定义它。我想把它定义为......

<span class="help-inline" show-error="required" field="schoolSignup.last_name">This field is required</span>

就我而言

    .directive('showError', function () {
    return {
        restrict: 'A',
        scope:{
            field: "="
        },
        link: function(scope, elem, attrs, ctrl)
        {
            var errorType = attrs.showError;

            scope.errors = scope.field.$error[errorType];

           // NOT WORKING YET
        }
    };
});

我该怎么做？

Answer 1

你走在正确的轨道上;但是，formName.fieldName中的点会使您使用object[field]语法时出现问题。相反，您可以使用$parse服务（docs）非常好地完成此任务：

app.directive("showError", function($parse) {
  return {
    link: function(scope, elem, attrs) {
      // Returns a function that, when called with a scope,
      // evaluates the expression in `attrs.field` (e.g.
      // "schoolSignup.last_name") on the scope.
      var getter = $parse(attrs.field);

      // Every time a digest cycle fires...
      scope.$watch(function() {
        // ...get the input field specified in the `field` attribute...
        var field = getter(scope);
        // ...and check to see if the error specified by the
        // `show-error` attribute is set.
        if (field.$dirty && field.$error[attrs.showError]) {
          elem.show();
        } else {
          elem.hide();
        }
      });
    }
  };
});

以下是一个有效的例子：http://jsfiddle.net/BinaryMuse/Lh7YY/

Angular.js将ngShow函数重写为指令

1 个答案: