0

我会保持这个简单。你可以在这里查看这个小提琴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();
        }
    };
});
4

2 回答 2

2

我相信该指令在具有价值之前就被调用了。将其包装在超时中有效。

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);
        }
    };
}]);
于 2015-01-21T12:01:30.397 回答
0

如果有人仍然希望在最新的角度上进行这项工作......

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/

于 2015-09-24T15:42:16.207 回答