jquery-ui - 从 Angular 指令更新 jQuery UI 滑块的问题

Question

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

上的工作示例。

为什么这条线$privateScope.sliderElement.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');
            });
        }
    }
});