AngularJS：从模板模型到父范围的指令绑定值

我试图创建一个angular指令，其行为与jquery中的JSFIDLE相同

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

在小提琴中，你可以看到我注释掉的线条，我以为我可以增加一块手表的宽度，但这似乎不起作用

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

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

任何帮助都将不胜感激

---

更新工作解决方案

试试看

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

app.directive（'measurement'，function（）{
返回{
限制：'E'，
范围：{
值：'='，
分数：'='
},
模板：“”，
控制器：['$scope'，函数（$scope）{
}],
链接：功能后链接（范围、IELENT、iAttrs、控制器）{
范围：$watch（'value'，函数（value）{
scope.wholeAmount=parseInt（值）| | 0；
scope.fraction=getFraction（值%1）
});
范围$watch（'wholeAmount'，函数（值）{
scope.value=（parseInt（scope.wholeAmount）| | 0）+eval（scope.fraction）；
});
范围：$watch（'分数'），函数（值）{
scope.value=（parseInt（scope.wholeAmount）| | 0）+eval（scope.fraction）；
});
}
}
});

演示：

---

注意：

eval（）

之所以使用，是因为这里没有用户输入

尝试了它，然后跟着你的小提琴，一旦尝试在控制器的宽度范围文本框中键入，它就会停止工作。这些值对您来说是双向重新计算的吗？@jdev4ls同时

getFraction

方法也有缺陷。。。需要更多的时间来修复它。。在值中，如果您给出除.5以外的任何小数部分，该方法将崩溃。。。它与angular js没有任何关系……感谢它的工作，我知道这个函数有缺陷，我从一些网站上取下它只是为了暂时解决问题，分数列表将只支持第8级的分数，所以1/8、1/4、3/8、1/2、5/8、3/4、7/8。。现在我得到了双向绑定，我将修复该函数。