Question

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

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

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

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

在angular指令示例中，更改文本框时不会更新整数和小数，这与jquery小提琴的工作方式不同。

非常感谢任何帮助。

更新工作解决方案

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

Answer 1

尝试

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：从模板模型将指令绑定到父作用域的值

1 个答案: