AngularJS : directive binding value to parent scope from template model

Question

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

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

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

http://jsfiddle.net/Pp6rZ/

在 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 的工作方式不同，在更改文本框时，它不会更新整数和分数。

任何帮助将不胜感激。

更新工作解决方案

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()使用，因为这里没有用户输入