Javascript 用AngularJS观察输入变化

我已经学会了AngularJS的基本知识，但我刚刚遇到了麻烦。 我想要一个指令，创建一个文本框，在这里我可以使用$observe响应值的变化。我已经尝试了我能想到的一切，但我想我错过了一些基本的东西。我得到了“未定义的Fubar！”在控制台中，在页面上刷新，但在值更改时不再记录日志。以下是我目前的情况：

HTML

Javascript

拨弄

---

如果有人能告诉我怎么做，我将不胜感激。

您使用的$observe不正确。第一个参数是传递到范围中要观察的属性的名称。不能在HTML属性（如value）上使用$observe

---

这里发生的事情是，正如Sam指出的，你只能观察一个插值属性值，也就是说，{{}}在它里面，这与value属性不同。value属性为value属性提供默认值

attrs.$observe单向工作：您只能检查属性值中的更改。您的指令当前正在观察attr1的值，该值绑定到父范围中fubar的值。如果要更改fubar的值，则输入框的value属性将相应更改

通过在输入框中键入来更改value属性时，value属性不会更改

幸运的是，已经有一个指令监视输入元素的value属性：。您可以通过在当前文本框旁边添加第二个元素来测试所有这些，如中所示：

---

正如您将看到的，两个输入都将显示Fubar！，范围字段的值。尝试更改ng模型文本框中的文本，另一个文本框的值也将更改，因为其值属性已更改，并且其值属性未从默认值更改。接下来，在从属输入框中键入。您将看到mg模型输入没有改变。更重要的是，如果您现在在ng模型框中键入，则依赖输入框现在不会更改，因为它不再使用默认值。请注意，$observe处理程序仍然会在控制台中记录默认值的更改。

这是有道理的，但肯定还有其他问题，因为它仍然不起作用。您能否制作一个简短、独立的JSFIDLE？问题中添加了JSFIDLE。如果您希望在输入更改时更新它，则需要双向绑定。看看这个JSFiddle：attrs中使用的回调函数。$observe只将新值作为参数，这就是为什么会出现未定义的Fubar！日志。

<attr-peek attr1="{{fubar}}"></attr-peek>

app.controller("observeController", function ($scope) {
    $scope.fubar = "Fubar!";
});

app.directive("attrPeek", function () {
    return {
        restrict: "E",
        replace: true,
        template: "<input type='text' value='{{attr1}}' />",
        scope: { attr1: "@" },
        link: function (scope, element, attrs, controller) {
            console.log(attrs);
            attrs.$observe("value", function (newValue, oldValue) {
                console.log(oldValue + " - " + newValue);
            });
        }
    };
});

link: function (scope, element, attrs, controller) {
     attrs.$observe("attr1", function (newValue, oldValue) {
          console.log(oldValue + " - " + newValue);
     });
 }

<input ng-model="fubar"></input>