Jquery ui 从Angular指令更新jQuery UI滑块时出现问题

我正在尝试使用指令概念启动并运行自定义滑块。
从输入字段更新滑块时出现问题。

下面的指令部分和上的工作示例

为什么这一行是privateScope.sliderement.slider（'value'，value）抛出错误，我如何解决它

app.directive('slider', function ($parse) {
    var $privateScope = {};

    return {
        restrict: 'A',
        template: '<div class="slider"></div><div class="input-append"><input class="span1" type="text" ng-model="percentage"><span class="add-on">%</span></div>',
        scope: {
            slider: '@',
            percentage: '='
        },
        controller: ['$scope', '$element', '$attrs', '$transclude', function ($scope, $element, $attrs, $transclude) {
            // Why this doesn't work?
            // $attrs.$observe('percentage', function (value) {
            //   console.log('$attrs.$observe.percentage', value);
            // });

            // Slider API: http://api.jqueryui.com/slider/
            $privateScope.sliderElement = $('.slider', $element).slider({
                value: $scope.percentage
            });
        }],
        link: function ($scope, $element, $attrs) {
            var changedBySlider = false;

            $scope.$watch('percentage', function (value) {
                // console.log('$scope.$watch.percentage', value);

                if (changedBySlider !== true) {
                    console.log('change the slider');

                    // This throws an error
                    // $privateScope.sliderElement.slider('value', value);
                } else {
                    console.log('don\'t change the slider');
                    changedBySlider = false;
                }
            });

            $privateScope.sliderElement.on('slidechange', function (event, ui) {
                $scope.$apply(function () {
                    // Why this doesn't work?
                    // $parse($attrs.percentage).assign($scope, ui.value);

                    $scope.percentage = ui.value;
                    changedBySlider = true;
                });
            });

            $scope.$on('$destroy', function (event) {
                console.log('on destroy');
            });
        }
    }
});

app.directive（'slider'，function（$parse）{
var$privateScope={}；
返回{
限制：“A”，
模板：'%1！'，
范围：{
滑块：“@”，
百分比：'='
},
控制器：['$scope'，'$element'，'$attrs'，'$transclude'，函数（$scope，$element，$attrs，$transclude）{
//为什么这不起作用？
//$attrs.$observe（'percentage'，函数（值）{
//console.log（“$attrs.$observe.percentage”，值）；
// });
//滑块API：http://api.jqueryui.com/slider/
$privateScope.sliderElement=$（'.slider'，$element）.slider({
值：$scope.percentage
});
}],
链接：函数（$scope、$element、$attrs）{
var changedBySlider=false；
$scope.$watch（'percentage'，函数（值）{
//console.log（“$scope.$watch.percentage”，值）；
if（changedBySlider！==true）{
log（“更改滑块”）；
//这会抛出一个错误
//$privateScope.sliderement.slider（'value'，value）；
}否则{
log（'不要更改滑块'）；
changedBySlider=false；
}
});
$privateScope.sliderElement.on（'slidechange'，函数（事件，用户界面）{
$scope.$apply（函数（）{
//为什么这不起作用？
//$parse（$attrs.percentage）.assign（$scope，ui.value）；
$scope.percentage=ui.value；
changedBySlider=true；
});
});
$scope.$on（“$destroy”，函数（事件）{
console.log（'on destroy'）；
});
}
}
});

First-它抛出了什么错误？其次，您似乎没有在控制器中定义或注入

$privateScope

。错误是

错误：[$rootScope:inprog]$digest已在进行中。在JSFIDLE上尝试一下——只需取消注释所提到的行（JSPart:51）即可获得更多细节
$privateScope
是一个已定义的私有变量，因为我无法用
$scope
处理它（不确定原因）-但它工作正常。