2

我正在尝试创建一个角度指令，使其行为与在 jquery 中完成的这个 jsfiddle 相同。

http://jsfiddle.net/RCaCM/7/

该指令的目的是让控制器（父）范围具有宽度值，并让指令将该值显示为文本框和分数选择列表，但仅将宽度存储为值，而不是整数和一小部分。这是我让它部分工作的尝试，但是在更改父值时我无法让它更新指令模型值。

http://jsfiddle.net/Pp6rZ/

在小提琴中，您可以看到我注释掉的行，我认为我可以在宽度上添加一个手表，但这似乎不起作用。

$scope.$watch('value', function(val){
   if(val && val !== '' && parseInt(val) !== 0){
    //  $scope.wholeAmount = parseInt($scope.value);
    //  $scope.fraction = getFraction($scope.value % 1);
    // }
   //});

在角度指令示例中，与 jquery fiddle 的工作方式不同，它在更改文本框时不会更新整数和分数。

任何帮助将不胜感激。

更新工作解决方案

http://jsfiddle.net/arunpjohny/P3w3G/2

4

1 回答 1

3

尝试

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);
            });
        }
    }
});

演示：小提琴

注意：eval()使用是因为这里没有用户输入

于 2013-09-28T03:02:03.317 回答