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

Question

I will keep this simple. You can check this fiddle here jsfiddle. Here when you load the knob, the color of the knob only gets updated on clicking/scrolling over it (the number changes and hence colors up). I have this same problem on my project and was hesitant to ask this as I was skeptic if I could properly make you understand my question. Now that I have this fiddle, I hope you all can see what is happening. I am new to angular.js. Every answer is a learning experience for me. Thanks in advance.

view

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

Controller + Directive

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

score 2 · Accepted Answer · edited Jul 18 '18 at 05:29

2

I believe it the directive is being called before it has the value. Wrapping it in a timeout works.

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

edited Jul 18 '18 at 05:29

Ismail Farooq

6,309
1
27
47

answered Jan 21 '15 at 12:01

Eilimint

307
1
3
11

Awesome!! This works. Is this the recommended way to do it? Anyway, I am happy as far as it works. Would also love to see other solutions if there are any. – Thomas Sebastian Jan 21 '15 at 12:05
Glad it help. You could use a watch function inside the link so anytime $scope.number is changed the jquery plugin is called and updates the knob. If $scope.number isn't going to change then this way is fine. – Eilimint Jan 21 '15 at 12:49
1

Here is what's happening. The directive is being called before the data from the JSON is being set. This is quite common. This video really helped me understand how to get plugins working. http://onehungrymind.com/angularjs-chosen-plugin-awesome/ Watch it all the way through. He will explain the same problems you are running into. – Eilimint Jan 22 '15 at 10:51
I will go through the entire video for sure. Thank you for your valuable time. Helped a lot. – Thomas Sebastian Jan 22 '15 at 12:01
A small update: As I had very little time to spend with this issue, I fixed it by changing the timeout value to a certain value. Now it works with just your method. So thanks to you once again. – Thomas Sebastian Feb 03 '15 at 11:01

score 0 · Answer 2 · answered Sep 24 '15 at 15:42

if anyone still looking to make this work on the latest 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);
    }
};

}]);

created the fiddle with the working sample... http://jsfiddle.net/k4yq06yt/

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

2 Answers2