angularjs - AngularJs 将值传递给指令

Question

我正在尝试将值传递给指令。该指令用于集成一个 jquery 插件Knob

JSFIDDLE：http: //jsfiddle.net/Tropicalista/TH87t/93/

我有这个代码：

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().val(scope.number); 
        console.log(attrs)
    }
};
});

Answer 1

问题是knob()不返回元素。改用这个：

link: function(scope, element, attrs) {
    $(element).val(scope.number).knob();
}

这是你的小提琴：http: //jsfiddle.net/TH87t/94/

Answer 2

我将您的问题用作完全双向绑定的参考。对于 angular 1.2.1 的工作版本，请参见http://jsfiddle.net/sander_van_dam/m5YJu/

App.directive('knob', function() {
    return {
        require: 'ngModel',
        scope: { model: '=ngModel' },
        controller: function($scope, $element, $timeout) {
                var el = $($element);
                $scope.$watch('model', function(v) {
                    var el = $($element);
                    el.val(v).trigger('change');
                });
        },

        link: function($scope, $element, $attrs,$ngModel) {
                    var el = $($element);
                    el.val($scope.value).knob(
                        {
                            'change' : function (v) {
                                $scope.$apply(function () {
                                  $ngModel.$setViewValue(v);
                            });
                        }
                        }
                    );
        }
    }

});