javascript - 为什么在单击之前不加载旋钮的背景色？ [Angular.js]

我将保持简单。您可以在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();
        }
    };
});

最佳答案

我相信它在具有值之前就已被调用。
包装它在超时的作品。

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