Angularjs jQuery插件的指令中未绑定范围变量

我试图将输入字段中的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 );     
            });
        }   
    };
})

---

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

首先：您在元素中定义了数据不透明度，但希望将其用作属性。不透明度，这在逻辑上甚至不正确

第二：在您的指令中，如果您想读取当前指令的值，我的意思是：

      watch-opacity="data.opacity"

您需要在指令中这样说：

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

}

---

我不知道您将要做什么：（

使用jQuery MiniColors提供的

更改

回调。它将以十六进制和不透明度作为参数传入，您可以使用这些参数设置

范围.数据

属性

您需要将这些属性的设置包装在

范围内。$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

是可选的，这取决于您是否需要默认值或是否已将其放置在控制器中）：

---

当我看到你的script.js文件时，有一件事是可以肯定的，那就是你已经为颜色和不透明度属性指定了字符串值。因此它永远不能将它们绑定到任何值。为什么它不能绑定它们呢？将attributes.opacity更改为attributes.watchOpacity，我认为它会以任何方式将其转换，以便颜色值链接到值def在ng模型属性中定义（默认情况下，它应该是并工作的，但不知何故它不工作）和不透明度-到使用watchOpacity属性定义的相应变量的不透明度？这是因为我可以为页面的各个部分使用100个颜色选择器，比如说，在上面的示例中，它严格定义了用于更改值的变量。看看我对Plunker和我的答案所做的更新。通过引入隔离scope、 指令变得可重用。通过使用ng init和插件配置的

defaultValue

属性，您可以从视图中初始化默认值。

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