我正在尝试创建一个 Angular 指令,其行为与在 jquery 中完成的 jsfiddle 相同。
该指令的目的是让 Controller (父)范围具有宽度值,并让指令将该值显示为文本框和分数选择列表,但仅将宽度存储为值,而不是整数和分数。这是我的尝试,它部分工作,但在更改父值时我无法让它更新指令模型值。
在 fiddle 中,您可以看到我注释掉的行,我认为我可以在宽度上添加 watch ,但这似乎不起作用。
$scope.$watch('value', function(val){
if(val && val !== '' && parseInt(val) !== 0){
// $scope.wholeAmount = parseInt($scope.value);
// $scope.fraction = getFraction($scope.value % 1);
// }
//});
在 Angular 指令示例中,更改文本框时它不会更新整数和分数,这与 jquery fiddle 的工作方式不同。
任何帮助将不胜感激。
更新工作解决方案
最佳答案
尝试
app.directive('measurement', function () {
return {
restrict: 'E',
scope: {
value: '=',
fractions: '='
},
template: "<input type='text' ng-model='wholeAmount' maxlength='3' /><select ng-model='fraction' ng-options='fraction for fraction in fractions'></select>",
controller: ['$scope', function ($scope) {
}],
link: function postLink(scope, iElement, iAttrs, controller) {
scope.$watch('value', function(value){
scope.wholeAmount = parseInt(value) || 0;
scope.fraction = getFraction(value % 1)
});
scope.$watch('wholeAmount', function(value){
scope.value = (parseInt(scope.wholeAmount) || 0) + eval(scope.fraction);
});
scope.$watch('fraction', function(value){
scope.value = (parseInt(scope.wholeAmount) || 0) + eval(scope.fraction);
});
}
}
});
演示:Fiddle
注意:使用eval()
,因为此处没有用户输入
关于AngularJS : directive binding value to parent scope from template model,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19062475/