gpt4 book ai didi

javascript - 观察指令上的元素

转载 作者:行者123 更新时间:2023-11-28 08:03:02 25 4
gpt4 key购买 nike

我有下一个代码:

angular.module("Test", [])
.directive("testDirective", function () {
return {
restrict: "A",
scope: {
model: "="
}
link: function(scope, element) {
scope.$watch(function () {
element.find("#input").val().length
}, function (nv){
console.log(nv);
});
}
}
})
.controller("TestController", function($scope) {
$scope.model = "Test";
$scope.updateModel = function() {
$scope.model = Math.random();
};
})
;


<div ng-controller="TestController">
<div test-directive model="model">
<input id="input" type="text" /> <br />
<input type="button" value="Edit Model" ng-click="updateModel()" />
</div>
</div>

指令中 $watch 方法的回调仅在单击按钮时执行。但我想检查该元素的变化。有什么办法可以让它发挥作用吗?

编辑 1

如果我这样做,我就会注意到

scope: false

它不会创建一个隔离的范围,因此我可以从指令或 Controller 双向访问它(这就是我想要的)。但是,它也不允许我观看模型......

如果我在 Controller 上:

$scope.model.test = 1;
$scope.$watch("model.test", function(v) { log(v); });

指令中的 HTML:

<input type="text" ng-model="model.test" /> 

然后我修改 View 中的输入字段,log(v) 永远不会执行...

最佳答案

好的,

所以,我并不完全理解你想要实现的目标,我已经组装了一个简单的应用程序,它有 2 个 Controller 和一个指令。

指令本身包含一个模板,其中包含用于输入和按钮的 HTML。

它还有一个双向绑定(bind)属性 myModel,该属性在模板中使用,并且也是从 TestController 设置的。

您可以通过在文本框中键入内容来查看 2 向绑定(bind) - 其输入显示在下面的文本中,该文本绑定(bind)在 Controller 上 - 而不是直接绑定(bind)到指令。

我还向您展示了如何$broadcast来自您的指令的事件并从您页面上可能存在的任何其他 Controller /指令等监听。单击该按钮将增加计数,如第二个 Controller TestControllerTwo

上的文本所示

希望这能演示您想要的内容?

您可以看到plunker这里

关于javascript - 观察指令上的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25146385/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com