javascript - 使用指令时未定义 ngModel - Angularjs Controller

标签 javascript angularjs angularjs-directive angularjs-scope

使用 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 = '';
});

注意:这是显示问题的简化版本。我的指令显示了同样的问题。

最佳答案

这可能是因为您在指令中使用的模式字符串。尝试绑定(bind)一个 $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;
});

关于javascript - 使用指令时未定义 ngModel - Angularjs Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40669046/

相关文章:

javascript - 在 Node 上运行 npm-scripts

javascript - 在javascript中获取被点击的元素ID

javascript - 是否有任何逻辑可以在 angularjs Controller 中重命名 firebase 上传文件

javascript - AngularJS 上不断出现注入(inject) modulerr 错误

angularjs - 在回调中获取返回值 Angular js 指令

javascript - ng-csp 指令的性能影响

javascript - float 图不显示

javascript - 在nodejs中使用模块的变量范围

angularjs - 在同一指令的链接函数中使用指令 Controller 的函数

javascript - ng-click 在第一次单击后不起作用(嵌入指令)