如何在指令中为 ng-model 设置正确的范围？

Posted 2023-03-13

【中文标题】如何在指令中为 ng-model 设置正确的范围？

【英文标题】：how can i set the correct scope for ng-model in directive?

【发布时间】：2015-08-06 04:00:28

【问题描述】：

我有一个简单的指令来自动化滑块：

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/

滑块模型未更新

【参考方案1】：

您可以使用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>

【讨论】：

Grr，我可以发誓我也尝试过包含模型，但肯定做错了什么......

为什么不只是 scope: value: '=' ？

因为 scope.value 不是模型 @evc