Question

我试图将输入字段中的2个值绑定到范围变量。第一个是输入值（颜色，写为文本），第二个是属性值（不透明度值）。我希望他们改变，而且，我也希望他们能够输出他们的价值。

myApp.directive( 'watchOpacity', function() {
    return {
        restrict: 'A',
        link: function( scope, element, attributes ) {
            scope.$watch( attributes.opacity, function(value) {
                console.log( 'opacity changed to', value );     
            });
        }   
    };
})

Plunker demo

问题是输入的值和属性的值都没有显示/绑定。

Answer 1

使用jQuery MiniColors提供的change回调。它将作为参数传入十六进制和不透明度，您可以使用它来设置scope.data属性。

您需要在scope.$apply回调中包装这些属性的设置，以确保之后运行摘要周期，以便更新您的视图：

.directive( 'watchOpacity', function($timeout) {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
          watchOpacity: '='
        },
        link: function( scope, element, attributes, ngModel ) {
            $timeout(function(){
                element.attr('data-opacity', scope.watchOpacity);
                $(element).minicolors({
                  opacity: true,
                  defaultValue: ngModel.$modelValue || '',
                  change: function(hex, opacity) {
                    ngModel.$setViewValue(hex);
                    scope.$apply(function() {
                        scope.watchOpacity = opacity;
                    })
                  }
                });
            });
        }   
    }
})

使用此指令，您的视图将如下所示（ng-init是可选的，具体取决于您是否需要默认值，或者您是否已将它们放置在控制器中）：

<input type="text" watch-opacity="data2.opacity" ng-model="data2.color"
ng-init="data2.color = '#0000FF'; data2.opacity = 0.5;" />

Working fork of your demo

Answer 2

首先：您已经在元素中定义了数据不透明度，而您希望将其用作attributes.opacity，这在逻辑上是不正确的

其次：在你的指令中，如果你想读取当前指令的值，我的意思是：

      watch-opacity="data.opacity"

你需要在你的指令中说出这样的话：

     link:function(scope,element,attributes){
      var data_opacity = attributes.watchOpacity// you have written attribute.opacity!

}

我不知道你要做什么：（

范围变量在jQuery插件的指令中没有绑定

2 个答案: