Question

看一看ngRequired指令，我发现他们没有使用隔离范围，但是他们设法观察“required”属性并检查是否有变化（得到最终的布尔表达式结果）

attr.$observe('required', function() {
  validator(ctrl.$viewValue);
});

如果在控制器范围内我有一个名为isRequired的布尔变量，我可以直接写：

<input id="year"
          type="text"
          name="year"
          data-ng-model="currentVehicleEdit.year"
          data-ng-required="isRequired" />

我将表达式评估为true或false。

我在指令（下拉列表验证）上尝试了相同的方法，但我得到的只是该属性的文本值。所以我必须输入这样的结果来获得结果（“true”，“false”）：

<select id="involvementType"
      name="involvementType"
      data-ng-model="currentVehicleEdit.involvementType"
      data-ng-options="a.name for a in involvementTypes"
      data-combocontainsinvalidselection="{{showForm}}"
>
</select>

如果我尝试以与ngRequired相同的方式使用它（data-combocontainsinvalidselection =“showForm”），我只得到纯文本（“showForm”），而不是评估的表达式。

关于我创建的指令代码：

mydirectives.directive('combocontainsinvalidselection', [
    function () {
        return {
            require: "?ngModel",
            link: function(scope, elm, attr, ctrl) {
                if (!ctrl) return;

                var validator = function (value) {
                    if (attr.combocontainsinvalidselection == true && value.id==0) {
                        ctrl.$setValidity('combocontainsinvalidselection', false);
                        return;
                    } else {
                        ctrl.$setValidity('combocontainsinvalidselection', true);
                        return value;
                    }
                };

                ctrl.$formatters.push(validator);
                ctrl.$parsers.unshift(validator);

                attr.$observe('combocontainsinvalidselection', function () {
                    validator(ctrl.$viewValue);
                });                               
            }
        };
    }
]);

ng-required指令如何设法评估表达式？

Answer 1

您可以parse该属性。首先，避免在标记中的{{}}周围showForm，然后在您的条件中使用$parse，如下所示：

 if (  $parse(attr.combocontainsinvalidselection)(scope) == true && value.id==0) {
     //some code

不要忘记将$parse注入您的指令声明。

Answer 2

只需仔细检查，解析就可以获得价值，但不知道如何观察表达式（似乎只适用于{{}}），我想避免孤立的范围。< / p>

试过这个：

 attr.$observe($parse('combocontainsinvalidselection')(scope), function () {
      validator(ctrl.$viewValue);
 });

Answer 3

遇到同样的问题，只是在另一个问题中找到了解决方案：Angularjs: how to pass scope variables to a directive?

我可以证实它对我有用。

编辑：抱歉，很明显，这个答案特别是，该指令用作＆＃34; create-control =＆＃39; yourConditionalExpression＆＃39;＆＃34;在HTML中。如果需要，你可以使用范围。$ watch。

app.directive('createControl', function() {
  return {
    scope: {
      createControl:'='
    },
    link: function(scope, element, attrs){    
       element.text(scope.createControl);    
    }      
  }
})

编辑：要解决OP的规范：这是我实现的ng-required的自定义克隆，它成功地处理了一个条件并与应用于下拉列表的所有其他指令相处。您应该能够修改它以执行您需要的任何操作。

//没有将模型值设置为“未定义”的ng-required副本＆＃39;当用户将下拉菜单设置为＆＃39;＆＃39; （不是模型的有效最终值，但在填写表单时优先于＆＃39; undefined＆＃39;因为＆＃39; undefined＆＃39;给出了一个丑陋的空白下拉列表）

yourApp.directive('requiredSelect', function () {
  return {
    scope: {
        requiredSelect: '='
    },
    require: '?ngModel',
    link: function (scope, elm, attr, ctrl) {
        if (!ctrl) return;

        var validator = function (value) {
            if (scope.requiredSelect && ctrl.$isEmpty(value)) {
                ctrl.$setValidity('requiredSelect', false);
                return value; // like the original ng-required and other common validators, you might return undefined here if that's your preference
            } else {
                ctrl.$setValidity('requiredSelect', true);
                return value;
            }
        };

        ctrl.$formatters.push(validator);
        ctrl.$parsers.unshift(validator);

        scope.$watch('requiredSelect', function () {
            validator(ctrl.$viewValue);
        });
    }
  };
});

Answer 4

我不确定他们是如何做到这一点的，所以你不必将你的表达包裹在{{...}}中，但我确实找到了解决方法我的自定义验证器。

以下是他们的所作所为：

  attr.$observe('required', function(value) {
    // Do stuff
  });

这是解决方法：

  scope.$watch(attr.myCustomValidator, function(value) {
    // Do stuff
  });

attr。$观察必要的指令

4 个答案: