angularjs - Angular 绑定(bind)在数据属性中不起作用

Question

我正在使用一些 css html 模板，它带有许多 html 组件和许多用于各种事物的数据属性。例如对于 slider 它有类似的东西

 <div class="slider slider-default">
    <input type="text" data-slider class="slider-span" value="" data-slider-orientation="vertical" data-slider-min="0" data-slider-max="200" data-slider-value="{{ slider }}" data-slider-selection="after" data-slider-tooltip="hide">
</div>

在这里我试图绑定(bind)值

data-slider-value="{{ slider }}"

但它不起作用。变量 'slider' 在 $scope 中设置为:

   $scope.slider = 80;

当我将其绑定(bind)为时，相同的值 80 会显示为:

 <h4>I have {{ slider }} cats</h4>

我也试过

    ng-attr-data-slider-value="{{ slider }}" 

它没有用。
更新
该指令有这样的东西

function slider() {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.slider();
        }
    }
};

在哪里 element.slider();调用bootstrap-slider.js中的代码(来自 here )每个 slider 。

Answer 1

我玩了一段时间，并为您提出了一些选择。见我的Plunkr看到他们在行动。

选项 1: slider 更改时无需更新范围值

这将适用于您问题中的 HTML。以下是您应该将指令代码更改为的内容。

app.directive('slider', function slider() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      attrs.$observe('sliderValue', function(newVal, oldVal) {
        element.slider('setValue', newVal);
      });
    }
  }
});

选项 2:两种方式绑定(bind)到范围属性

如果您需要在拖动 slider handle 时更新范围属性，则应将指令更改为以下内容:

app.directive('sliderBind', ['$parse',
  function slider($parse) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var val = $parse(attrs.sliderBind);
        scope.$watch(val, function(newVal, oldVal) {
          element.slider('setValue', newVal);
        });

        // when the slider is changed, update the scope
        // property.
        // Note that this will only update it when you stop dragging.
        // If you need it to happen whilst the user is dragging the
        // handle, change it to "slide" instead of "slideStop"
        // (this is not as efficient so I left it up to you)
        element.on('slideStop', function(event) {
          // if expression is assignable
          if (val.assign) {
            val.assign(scope, event.value);
            scope.$digest();
          }
        });
      }
    }
  }
]);

对此的标记略有变化:

<div class="slider slider-default">
  <input type="text" data-slider-bind="slider2" class="slider-span" value="" data-slider-orientation="vertical" data-slider-min="0" data-slider-max="200" data-slider-selection="after" data-slider-tooltip="hide" />
</div>

注意 data-slider-bind 的使用属性来指定要绑定(bind)到的范围属性，并且缺少 data-slider-value属性。

希望这两个选项之一是您所追求的。