Question

我已经学会了关于AngularJS的基础知识，但我刚刚碰壁。我想要一个创建文本框的指令，我可以使用$ observe来响应值的变化。我已经尝试了我能想到的一切，但我想我错过了一些基本的东西。我得到'未定义 - 富巴！'在页面刷新的控制台中，但值更改时没有更多日志。这就是我现在所拥有的：

HTML

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

的Javascript

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);
            });
        }
    };
});

小提琴 http://jsfiddle.net/kp226/

如果有人能告诉我该怎么做，我真的很感激。

Answer 1

您正在使用$ observe错误。第一个参数是要传递给范围的要观察的属性的名称。您不能在value

等HTML属性上使用$ observe

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

Answer 2

正如Sam指出的那样，这里发生的是，您只能$observe插入的属性值（即{{}}在其中），这与value 属性不同。 value属性提供value属性的默认值。

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

当你更改value属性时（通过在输入框中输入），value属性不会改变。

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

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

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

使用AngularJS观察输入变化

2 个答案: