2013-09-16 5 views
1

Я пытаюсь передать значение директиве. Директива используется для интеграции JQuery плагин KnobAngularJs передавая значение директиве

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

ответ

2

Проблема заключается в том, что knob() не возвращает этот элемент. Используйте вместо этого:

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

Вот ваша скрипка: http://jsfiddle.net/TH87t/94/

+0

Это работает, спасибо за помощь. Но если я хочу изменить значение нажатием на кнопку, я должен добавить $ watch для директивы? http://jsfiddle.net/Tropicalista/TH87t/96/ – Tropicalista

+0

@Tropicalista - Это не то, как вы используете '$ watch'. См. Здесь: http://jsfiddle.net/TH87t/98/ –

+0

О, спасибо, я действительно нуб о угловых и директивах кажется слишком сложным ... – Tropicalista

2

Я использовал свой вопрос в качестве эталона для полностью двухканального направлении связывания. Для рабочей версии с угловым 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); 
          }); 
         } 
         } 
        ); 
     } 
    } 

}); 
Смежные вопросы