ngModel不会在自定义指令工作 [英] ngModel doesn't work in the custom directive
问题描述
我就知道肯定是问题，我不明白AngularJs的范围好。我不得不致力于这对我来说很难。所以，我在这里发表一个例子，希望有人帮我把它更加明确。谢谢你。
HTML部分
＆lt;试验片区NG模型=testModel.text＆GT;＆LT; /试验区＆GT;
＆LT;输入类型=文本NG模型=testModel.text＆GT;＆LT; /输入＆GT;
＆LT; textarea的NG-模式=testModel.text＆GT;＆LT; / textarea的＆GT;
JS部分
app.controller（'AppController的'，函数（$范围，$日志）{
$ scope.testModel = {文字：123};
}）app.directive（'testArea'，函数（）{
变种textareaInputDir = {};
textareaInputDir.restrict =E;
textareaInputDir.replace =真;
textareaInputDir.template =＆LT; DIV＆GT;＆LT; textarea的＆GT;＆LT; / textarea的＆GT;＆LT;标签＆gt;＆LT;小＆GT;＆LT; /小＆GT;＆LT;跨度＆GT; *＆LT; / SPAN＆GT;＆LT; /标签＆gt;＆LT; / DIV＆gt;中;
textareaInputDir.require =ngModel;
textareaInputDir.link =功能（范围，jqElement，ATTRS，ngModelCtrl）{
scope.backgroundValue = {文字：''};
ngModelCtrl。$ =渲染功能（）{
jqElement.find（'文本区域'）文本（ngModelCtrl $ viewValue）。
scope.backgroundValue.text = ngModelCtrl $ viewValue。
}
//获取textarea元素
VAR txtAreaElement = jqElement.find（'textarea的'）;
//监听更改事件 txtAreaElement.bind（'KEYUP'，函数（）{
如果（范围$$阶段。）回报;
范围。$应用（函数（）{
VAR bgVal = angular.isString（ngModelCtrl。$ viewValue）？ 。ngModelCtrl $ viewValue：'';
scope.backgroundValue.text = bgVal;
ngModelCtrl $ setViewValue（bgVal）。
}）; }）;
范围。$腕表（'backgroundValue.text'，函数（）
{
ngModelCtrl。$ setViewValue（scope.backgroundValue.text）
}）;
};
返回textareaInputDir;
}）;
请回顾一下我在迄今所做的小提琴。
我是想实现两个方面对我的指令 testArea 和其他具有约束力。但我不明白，为什么它不能在我的指导工作？
更新
我改变了code一点点。但还是有问题。如果我改变了文本区域的价值。 2种方式的结合将会丢失...
txtAreaElement.bind（'KEYUP'，函数（）{
如果（范围$$阶段。）回报;
范围。$应用（函数（）{
VAR txtAreaElement = jqElement.find（'textarea的'）;
变种bgVal = txtAreaElement [0]。价值;
scope.backgroundValue.text = bgVal;
ngModelCtrl $ setViewValue（bgVal）。 }）; }）;
我发现，如果我想申请的双向绑定即可。它并不需要使用 NgModelController 。根据本教程。
请查看下面。
HTML
＆lt;试验片区NG模型=testModel.text＆GT;＆LT; /试验区＆GT;
JS
app.directive（'testArea'，函数（）{
变种textareaInputDir = {};
textareaInputDir.restrict =E;
textareaInputDir.replace =真;
textareaInputDir.scope = {ngModel：'='};
textareaInputDir.template =＆LT; DIV＆GT;＆LT; textarea的NG-模式='ngModel'＆GT;＆LT; / textarea的＆GT;＆LT;标签＆gt;＆LT;小＆GT;＆LT; /小＆GT;＆LT;跨度＆GT; *＆LT; / SPAN＆GT; ＆LT; /标签＆gt;＆LT; / DIV＆gt;中; 返回textareaInputDir;
}）;
如果有什么不对。请您指正.thanks。
I knew definitely it is problem I didn't understand the scope of AngularJs well. I had to committed it is hard for me. So I post a example here, Hope someone help me to get it more clear. Thanks.
Html Part
<test-Area ng-model="testModel.text"></test-Area>
<input type="text" ng-model="testModel.text"></input>
<textarea ng-model="testModel.text"></textarea>
JS Part
app.controller('AppController', function ($scope, $log) {
$scope.testModel={text:"123"};
})
app.directive('testArea',function() {
var textareaInputDir = {};
textareaInputDir.restrict="E";
textareaInputDir.replace="true";
textareaInputDir.template="<div><textarea ></textarea><label><small></small><span >*</span></label></div>";
textareaInputDir.require="ngModel";
textareaInputDir.link=function (scope, jqElement, attrs,ngModelCtrl) {
scope.backgroundValue={text:''};
ngModelCtrl.$render = function () {
jqElement.find('textarea').text(ngModelCtrl.$viewValue);
scope.backgroundValue.text=ngModelCtrl.$viewValue;
}
//get the textarea element
var txtAreaElement = jqElement.find('textarea');
//listen for the change event
txtAreaElement.bind('keyup', function(){
if (scope.$$phase) return;
scope.$apply(function () {
var bgVal=angular.isString(ngModelCtrl.$viewValue) ? ngModelCtrl.$viewValue : '';
scope.backgroundValue.text=bgVal;
ngModelCtrl.$setViewValue(bgVal);
});
});
scope.$watch('backgroundValue.text',function()
{
ngModelCtrl.$setViewValue(scope.backgroundValue.text)
});
};
return textareaInputDir;
});
Please review what I had done so far in the fiddle.
I was trying to implement a two ways binding for my directive testArea and others. But I can't figure out why it doesn't work in my directive?
Updated
I changed the code a little bit. but still have problem. if I changed the value of text area. the 2 ways binding will be lost...
txtAreaElement.bind('keyup', function(){
if (scope.$$phase) return;
scope.$apply(function () {
var txtAreaElement = jqElement.find('textarea');
var bgVal=txtAreaElement[0].value;
scope.backgroundValue.text=bgVal;
ngModelCtrl.$setViewValue(bgVal);
});
});
I found if I want to apply bi-directional binding. It doesn't need to use NgModelController. according to this tutorial.
Please review below.
HTML
<test-Area ng-model="testModel.text"></test-Area>
js
app.directive('testArea',function() {
var textareaInputDir = {};
textareaInputDir.restrict="E";
textareaInputDir.replace="true";
textareaInputDir.scope={ngModel:'='};
textareaInputDir.template="<div><textarea ng-model='ngModel'></textarea><label><small></small><span >*</span></label></div>";
return textareaInputDir;
});
If there is something wrong. please kindly correct me .thanks.
这篇关于ngModel不会在自定义指令工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
