Angular- 在指令中，元素验证始终未定义

Question

我有一个表单，其中只有很少的输入字段。当用户关注输入字段或单击提交按钮时，我想在弹出窗口中显示错误消息。我创建了一个指令，将 popover 属性添加到输入字段。因此，当用户从输入字段移出时，我将检查验证，如果验证失败则要显示弹出窗口。但是，当我尝试始终检查时，我变得不确定。

有人可以帮我解决这个问题吗？我的 plunker

app.directive("errorTooltip", function($compile, $interpolate, $timeout) {
  return {
    scope: true,
    require: 'ngModel',
    link: function (scope, element, attr, ctrl) { 
          element.attr('popover-trigger', "'show'"); 
          element.attr('popover-placement', 'top');
          element.attr('uib-popover', element.attr("data-info"));

          var blurred = false;
          element.on("blur",function(event){
           blurred = true;
          });
          scope.$watch(function() {
            console.log(ctrl.$name.$invalid); //always comes undefined
            element.triggerHandler('show');
            return ctrl.$name.$invalid
          }, function(invalid) {
          if (!blurred && invalid) { 
              return
              }
             console.log("test")
              //element.toggleClass('has-error', invalid);

        });


    }
  };
});

提前致谢。

Answer 1

替换行：

console.log(ctrl.$name.$invalid);

有了这个：

console.log(ctrl.$invalid);

已更新 plunker here。

Angular- 在指令中，元素验证始终未定义

Angular- In directive, element validation always undefined

angularjs

angularjs-directive

popover

angular-bootstrap