为什么我的angularjs指令造成双向绑定失败？ [英] Why is my angularjs directive causing two-way binding to fail?

问题描述

我不明白，为什么当我的指令元素上启用了双向绑定失败。

I can't figure out why when my directive is enabled on an element, the two-way binding fails.

考虑这个 plunkr

在第一删除提示= {{input1Error}} 尽快使输入1 变量更新为你输入一个有效的电子邮件。

On the first removing the tooltip={{input1Error}} makes the input1 variable update as soon as you type in a valid email.

在提示= {{input1Error}} 添加，在一个有效的电子邮件打字时，在输入1 模型从不更新。

When tooltip={{input1Error}} is added, when typing in a valid email, the input1 model is never updated.

我是什么失踪？

推荐答案

有与控制器的范围记录的问题。您可以通过实现以下更改解决这个问题。

There is a documented issue with the scope of the controller. You can get around this by implementing the changes below.

您的控制器改成这样：

app.controller('ctrl1', ['$scope','$log', function($scope, $log) {
    $scope.model = {};
}]);

和形式：

<form name="myForm" novalidate>

  <div class="form-group">
    <label>Input 1 *</label>
    <input 
      class="span2" 
      name="input1id" 
      type="email" 
      ng-model="model.input1" 
      tooltip="{{model.input1error}}" 
      tooltip-placement="bottom"
      tooltip-trigger="openPopup"
      tooltip-trigger-on='openPopup'
      tooltip-trigger-off='closePopup'
      tooltip-show="myForm.input1id.$invalid"
      required
    />
    <pre>Input 1 is invalid: {{myForm.input1id.$invalid}}</pre>
    <pre>Input 1 valid email: {{!myForm.input1id.$error.email}}</pre>
    <pre>Input 1 error msg: {{model.input1error}}</pre>
  </div>
  <span class='error hidden' error-on="!myForm.input1id.$error.email" error-for='input1error'>Please enter a valid email</span>
  <span class='error hidden' error-on="!myForm.input1id.$error.required"" error-for='input1error'>This field is required</span>
</form>

这篇关于为什么我的angularjs指令造成双向绑定失败？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！