请给我解释了滑块指令

Question

任何人都可以请解释滑块指令提供here

myApp.directive('slider', function() { 
     return { 
     restrict: 'A', 
      scope: { 
       ngModel: '=' 
      }, 
     link: function(scope, elem, attrs) { 

      console.log(scope.ngModel); 

      return $(elem).slider({ 
      range: "min", 
      animate: true, 
      value: scope.ngModel, 
      slide: function(event, ui) { 
       return scope.$apply(function(){ 
       scope.ngModel = ui.value; 
       }); 
      } 
      }); 
     } 
     }; 
    }); 

的ngmodel, range, animate, value:scope.ngModel等目的一样我看过差不多的一些文章从here但这似乎有点对我来说很复杂。

在此先感谢。

Answer 1

这是一个典型的使用jQuery插件的isolated scope指令配置。

scope.ngModel通过html中的匹配属性ng-model传递给指令。

'='使它成为与其父母的双向绑定。

至于滑块它是一个jQuery UI滑块和类似animate和range等的选项记录他们的API

$apply()在每当角上下文之外事件用于修改范围被使用。角度需要被告知运行摘要以更新视图