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

Question

我会保持这个简单。您可以在此处 fiddle jsfiddle 查看此内容。在这里，当您加载旋钮时，旋钮的颜色只会在 clicking/scrolling 上更新（数字会改变，因此会变色）。我在我的项目中遇到了同样的问题，并且犹豫是否要问这个问题，因为我怀疑我能否正确地让您理解我的问题。现在我有了这个fiddle，我希望你们都能看到发生了什么。我是 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 上完成这项工作...

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

}]);

使用工作示例创建了 fiddle... http://jsfiddle.net/k4yq06yt/

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

Why doesn't the background color of the knob load before click? [Angular.js]

javascript

jquery

angularjs

jquery-knob