Question

我会保持这个简单。你可以在这里查看这个小提琴jsfiddle。在这里加载旋钮时，旋钮的颜色只会在点击/滚动时更新（数字会改变，因此颜色会更高）。我在我的项目中遇到同样的问题并且犹豫不决，因为如果我能够正确地让你理解我的问题我会怀疑。现在我有这个小提琴，我希望你们都能看到发生了什么。我是angular.js的新手。每个答案对我来说都是一次学习经历。提前谢谢。

查看

<div ng-app="Knob" ng-controller="myCtrl">
<input type="text" ng-model="number" knob class="dial">
</div>

控制器+指令

var App = angular.module('Knob', []);
App.controller('myCtrl', function($scope) {
    $scope.number = 24;
})

App.directive('knob', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).knob();
        }
    };
});

Answer 1

我相信该指令在具有该值之前被调用。将其包装在超时工作中。

App.directive('knob',['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {            
            $timeout(function () { // You might need this timeout to be sure its run after DOM render.
                $(element).knob();
            }, 0, false);
        }
    };
}]);

Answer 2

如果还有人希望在最新的角度上做这项工作......

angular.module('ui.knob', []).directive('knob', ['$timeout', function ($timeout) {
return {
    restrict: 'EA',
    replace: true,
    template: '<input value="{{ knobData }}"/>',
    scope: {
        knobData: '=',
        knobOptions: '&'
    },
    link: function ($scope, $element) {
        var knobInit = $scope.knobOptions() || {};

        knobInit.release = function (newValue) {
            $timeout(function () {
                $scope.knobData = newValue;
                $scope.$apply();
            }, 0, false);
        };

        $scope.$watch('knobData', function (newValue, oldValue) {
            if (newValue !== oldValue) {
                $($element).val(newValue).change();
            }
        });

        $($element).val($scope.knobData).knob(knobInit);
    }
};

}]）;

创造了工作样本的小提琴...... http://jsfiddle.net/k4yq06yt/

为什么在点击之前没有旋钮负载的背景颜色？ [Angular.js]

2 个答案: