范围$手表项目doens'不适用于javascript对象的字段
The scope.$watch item doens't work for fields of javascript objects
我遇到了监视java脚本对象属性的问题。我在这里部分描述了这个问题,但我没有得到解决方案。。。
我将用另一种方式描述这个问题。这是小提琴
这是我指令的代码:
var myApp = angular.module('myApp', []);
var ctrl = function($scope) {
$scope.amount = '0.00';
$scope.values = {
amount: 0.00
};
};
myApp.directive('currency', function($filter) {
return {
restrict: "A",
require: "ngModel",
scope: {
separator: "=",
fractionSize: "=",
ngModel: "="
},
link: function(scope, element, attrs) {
if (typeof attrs.separator === 'undefined' ||
attrs.separator === 'point') {
scope.separator = ".";
} else {
scope.separator = ",";
};
if (typeof attrs.fractionSize === 'undefined') {
scope.fractionSize = "2";
};
scope[attrs.ngModel] = "0" + scope.separator;
for(var i = 0; i < scope.fractionSize; i++) {
scope[attrs.ngModel] += "0";
};
scope.$watch(attrs.ngModel, function(newValue, oldValue) {
if (newValue === oldValue) {
return;
};
var pattern = /^'s*('-|'+)?('d*['.,])$/;
if (pattern.test(newValue)) {
scope[attrs.ngModel] += "00";
return;
};
}, true);
}
};
});
这是我的HTML布局:
<div ng-app="myApp">
<div ng-controller="ctrl">
{{amount}}<br>
<input type="text" style="text-align: right;" ng-model="amount" currency separator="point" fraction-size="2"></input>
</div>
</div>
我想将输入元素中的值绑定到外部控制器中的values.amount
项,但我的指令的watch指令不起作用。。。
我想要实现的逻辑如下:如果用户放置了一个点,我想要在输入元素中添加额外的零。我的意思是,如果输入元素中的值说"42",用户在那里放了一个点,那么现在的值是"42"。那么两个额外的零必须被加载为这样的"42.00"。
如果我使用ng-model="amount"
将输入元素的数据绑定到外部控制器中的变量,则输入元素中的逻辑会工作,但外部控制器的量值不会更新。
如果我使用ng-model="values.amount"
进行绑定,那么外部控制器的values.amount和输入元素逻辑都不起作用。
事实上,我必须使用ng-model="values.amount"
指令将输入元素绑定到values.amount
,但它不起作用,我不知道为什么。
有人能帮我解决这个问题吗?有什么想法或建议吗?
这不起作用,因为表达式
scope[attrs.ngModel] = ...
在amount
的情况下,这只是分配给scope.amount
。但在values.amount
中,它不会分配给scope.values.amount
,而是分配scope的"values.amount
"属性。
您可以像这样使用$parse
服务,而不是以这种方式进行分配。
var parsed = $parse(attrs.ngModel); // Parse expression
var currentValue = parsed(scope); // Evaluate expression
parsed.assign(scope, 'newvalue'); // Assign expression
这应该可以解决您的问题,但是您可能希望将使用解析器和格式化程序作为一种更好的方法。您不需要自己解释模型的值,而是可以通过ngModel
控制器来查看和更新它,使用解析器和格式化程序来控制转换。
- 使用较小的固定
- 摆弄解析器和格式化程序
我试着解决你的问题,结果是:
1) 删除指令范围
2) 将ngModel添加到链接函数中
3) 删除这部分代码(不需要)
scope[attrs.ngModel] = "0" + scope.separator;
for(var i = 0; i < scope.fractionSize; i++) {
scope[attrs.ngModel] += "0";
};
并替换$watch而不是此
ngModel.$parsers.unshift(function(viewValue) {
var pattern = /^'s*('-|'+)?('d*['.,])$/;
if (pattern.test(viewValue)) {
viewValue += "00";
};
element.val(viewValue); // set element view value
return viewValue; // set new model value
});
我试试这个,效果很好。
jsFiddle演示
资源这个岗位
欢呼
- HTML5 Canvas toDataURL(“image/png”)适用于一些绘画,而有些则不然,不确定原因
- JavaScript不显示剩余字符,但适用于其他页面
- 我如何完善这个Javascript代码,使其只适用于来自图像的链接(而不是来自文本的链接)
- 为什么这只适用于身体部分而不是头部
- 为什么不't此正则表达式适用于重复出现的对
- document.getElementById 对内部 html 的调用适用于 $_POST 和 $_GET 变量,但不
- JavaScript 位置适用于本地主机而不是服务器
- Rally App SDK 2.0:Rallymultiobjectpicker,适用于不显示displayField的
- jQuery事件在Mozilla上不起作用,并且适用于其他浏览器
- Angular.js - 控制器不为索引执行,适用于其余模板
- D3 .on 更改适用于文本而不是图表
- Zillow 数据 - json_encode不起作用 - 适用于常规变量
- 弹出模式仅适用于表格中的第一个元素,第二次单击后不会再次打开
- Phonegap Android项目适用于模拟器,而不是实际的手机
- ajax jonp 不应该适用于 请求的上不存在“访问控制-允许源”标头
- AngularJS:ng-单击不起作用,适用于<按钮>
- Javascript不会在移动设备上加载.适用于桌面
- 为什么我的代码适用于高度:100px,而不是高度:100%
- 拖放区.js + Laravel-多文件上传不起作用(仅适用于一个文件)
- 哪些限制适用于不透明响应