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でこれを機能させたいと考えている人がいれば...

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 に答える