本文介绍了为什么我的 angularjs 指令导致双向绑定失败?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不明白为什么在元素上启用我的指令时，双向绑定失败.
考虑这个 plunkr
在第一次删除 tooltip={{input1Error}} 时，只要您输入有效的电子邮件，input1 变量就会更新.
当添加 tooltip={{input1Error}} 时，当输入有效的电子邮件时，input1 模型永远不会更新.
我错过了什么?
解决方案
有记录的控制器范围问题.您可以通过实施以下更改来解决此问题.
将您的控制器更改为:
app.controller('ctrl1', ['$scope','$log', function($scope, $log) {$scope.model = {};}]);
和表格:
<div class="form-group"><label>输入 1 *</label><输入类=跨度2"名称=input1id"类型=电子邮件"ng-model="model.input1"tooltip="{{model.input1error}}"工具提示放置=底部"工具提示触发器=openPopup"tooltip-trigger-on='openPopup'tooltip-trigger-off='closePopup'tooltip-show="myForm.input1id.$invalid"必需的/><pre>输入 1 无效:{{myForm.input1id.$invalid}}</pre><pre>输入 1 个有效的电子邮件:{{!myForm.input1id.$error.email}}</pre><pre>输入 1 错误信息:{{model.input1error}}</pre>
<span class='error hidden' error-on="!myForm.input1id.$error.email" error-for='input1error'>请输入有效的电子邮件</span><span class='error hidden' error-on="!myForm.input1id.$error.required"" error-for='input1error'>这个字段是必填的</span></表单>
I can't figure out why when my directive is enabled on an element, the two-way binding fails.
Consider this plunkr
On the first removing the tooltip={{input1Error}} makes the input1 variable update as soon as you type in a valid email.
When tooltip={{input1Error}} is added, when typing in a valid email, the input1 model is never updated.
What am I missing?
解决方案
There is a documented issue with the scope of the controller. You can get around this by implementing the changes below.
Change your controller to this:
app.controller('ctrl1', ['$scope','$log', function($scope, $log) {
$scope.model = {};
}]);
And the form to:
<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 指令导致双向绑定失败?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
