Question

任何人都可以解释提供here

的Slider指令

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滑块，其{API}中记录了animate和range等选项

只要角度上下文之外的事件用于修改范围，就会使用

$apply()。需要告知Angular运行摘要以更新视图

请提供Slider指令的解释

1 个答案: