Question

我点击输入字段时会打开一个颜色选择器，它会将选定的RGBA字符串写回输入的value属性。

首先，我认为将ng-model="color"添加到input标记就足以让color变量保存/绑定我选择的颜色的rgba字符串，但它没有工作。所以我尝试添加自定义指令来监视输入的value属性更改

// js
.directive('bindInput', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch( attrs.value , function (v) {
                console.log('value changed, new value is: ' + v);
            });
        }
    };
})

// html (jade)
input#text-highlight(ng-model="color",type="text",value="",bind-input)

如果我打开控制台，我可以看到value changed在刷新时输出一次。如果我尝试通过打开颜色选择器来改变颜色，我可以看到值出现在输入中，如果我用jquery检查值的属性值（通过$（“text-highlight”）。val（））我也可以看到新颜色值设置为输入的value属性。但为什么我在控制台中不再收到value changed条消息？

也许我在做一些完全错误的事情。结果我想要的只是新的颜色值存储在$scope.color下。

Answer 1

您需要将范围的属性绑定到您的指令，以在指令中查看它：

return {
    restrict: 'AE',
    scope: {
      myVar: '='
    },
   ...
}

  $scope.$watch('myVar', function(value) {
    // do something 
  });

在你的情况下你必须这样：

scope: { value : '@'};

scope.$watch(attrs.value, function (newVal) {
  //do something with the new val
});

指令不会监视值属性更改

1 个答案: