Question

使用ngPattern指令时，我的ngModel未定义。如果我删除ngPattern，ngModel将按预期工作。请参阅plnkr。

注意在文本框中键入值时vm.condition是如何显示的，但是一旦删除了ngPattern，vm.condition就会按预期显示。

HTML

<body ng-controller="MainCtrl as vm">
    <div ng-form="vm.frmTest">
      <input id="txtHealth" name="txtHealth" type="text" ng-model="vm.condition" ng-pattern="/^(.+)$/g">
      <div class="help-block" ng-messages="vm.frmTest.txtHealth.$error" ng-show="vm.frmTest.txtHealth.$invalid">
        <p ng-message="pattern">Error.</p>
      </div>
    </div>
    <span>{{vm.condition}}</span>
</body>

JS

app.controller('MainCtrl', function($scope) {
    this.condition = '';
});

注意：这是一个显示问题的愚蠢版本。我的指示显示了同样的问题。

Answer 1

这可能是因为您在指令中使用的模式字符串。尝试使用$scope绑定并检查您的指令。您可以在此处查看相对的 PLUNKER 示例：

Demo Example

HTML：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-messages.js"></script>
        <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl as vm">
    <div ng-form="vm.frmTest">
      <input id="txtHealth" name="txtHealth" type="text" ng-model="vm.condition" ng-pattern="re">
      <div class="help-block" ng-messages="vm.frmTest.txtHealth.$error" ng-show="vm.frmTest.txtHealth.$invalid">
        <p ng-message="pattern">Error.</p>
      </div>
    </div>
    <span>{{vm.condition}}</span>
  </body>

</html>

JS：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  this.condition = '';
  $scope.re = /^(.+)$/g;
});

Answer 2

如果您要在视图上使用vm，则需要在控制器上声明vm。

var vm = this;

使用指令时，ngModel未定义 - Angularjs控制器

2 个答案: