[英]how can i set the correct scope for ng-model in directive?
我有一个简单的指令来自动化滑块:
app.directive('slider', function() {
return {
restrict: 'AE',
link: function(scope, element, attrs) {
element.slider({
value: scope[attrs.ngModel],
min: parseInt(attrs.min),
max: parseInt(attrs.max),
step: parseFloat(attrs.step),
slide: function(event, ui) {
scope.$apply(function() {
scope[attrs.ngModel] = ui.value;
});
}
});
}
};
});
为不同的滑块设置简单的作用域:
$scope.sliders = [
{type : 'red', value : 0},
{type : 'green', value : 0},
]
HTML:
<div class="sliders" ng-repeat="slider in sliders">
{{slider.value}}<slider min="1" max="10" step="1" ng-model="slider.value"></slider>
</div>
我的问题是我的滑块值没有在幻灯片上更新...
演示: http : //jsfiddle.net/ZXekc/641/
滑块模型未更新
您可以使用ngModelController更新ng-model值
var app = angular.module("app", []); app.controller("SomeController", function($scope) { $scope.sliders = [{ type: 'red', value: 0 }, { type: 'green', value: 0 }, ]; }); app.directive("slider", function() { return { restrict: 'E', require: 'ngModel', link: function(scope, elem, attrs, ctrl) { $(elem).slider({ range: false, min: parseInt(attrs['min']), max: parseInt(attrs['max']), step: parseFloat(attrs['step']), slide: function(event, ui) { scope.$apply(function() { ctrl.$setViewValue(ui.value) }); } }); ctrl.$render = function() { $(elem).slider("value", ctrl.$viewValue); }; } } });
slider { width: 200px; margin: 10px; display: block; }
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <div ng-app="app"> <div ng-controller="SomeController"> Price: {{price}} <div class="sliders" ng-repeat="slider in sliders"> {{slider.type}} = {{slider.value}} <slider min="1" max="10" step="1" ng-model="slider.value"></slider> </div> {{sliders | json}} <div> <input ng-repeat="slider in sliders" ng-model="slider.value" /> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.