我已经学会了关于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/
如果有人能告诉我该怎么做,我真的很感激。
答案 0 :(得分:0)
您正在使用$ observe错误。第一个参数是要传递给范围的要观察的属性的名称。您不能在value
link: function (scope, element, attrs, controller) {
attrs.$observe("attr1", function (newValue, oldValue) {
console.log(oldValue + " - " + newValue);
});
}
答案 1 :(得分:0)
正如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处理程序仍会记录控制台中默认值的更改。