$watch在指令中的使用
$watch是AngularJS框架中的一个重要概念，用于监视数据模型的变化并执行相应的操作。在指令中使用$watch可以实现对数据的监听和响应。
$watch的使用方式如下：
$scope.$watch('expression', function(newValue, oldValue) {
// 监听到数据变化时执行的操作
});其中，'expression'是要监视的数据模型表达式，可以是一个变量、一个函数调用或一个对象属性的链式访问。newValue表示新的值，oldValue表示旧的值。
$watch的作用是在数据发生变化时执行相应的操作，比如更新视图、发送网络请求等。它可以用于监视用户输入、异步数据的变化、数据模型的变化等场景。
在AngularJS中，$watch是实现双向数据绑定的关键机制之一。通过$watch，可以实现数据模型和视图之间的自动同步，提高开发效率和用户体验。
在腾讯云的云计算服务中，与$watch相关的产品和服务包括：
- 云服务器（CVM）：提供可扩展的计算能力，用于部署和运行应用程序。
- 云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务，用于存储和管理数据。
- 云监控（Cloud Monitor）：提供实时的监控和告警服务，用于监视应用程序和服务器的运行状态。
- 云函数（SCF）：提供事件驱动的无服务器计算服务，用于处理特定的业务逻辑。
- 云存储（COS）：提供安全可靠的对象存储服务，用于存储和管理大规模的非结构化数据。
更多关于腾讯云产品的信息和介绍，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
当我用下划线或骆驼大小写命名为$watch变量时，$watch不会触发。如果变量名$watch‘’ed不包含任何下划线或骆驼大小写，则可以工作。我没有发现任何关于变量名是$watch‘’ed的角度文档。
下面是$watch未能触发的代码：
下面是$watch正确触发的代码：
唯一的区别是变量名。
浏览 2提问于2015-04-03得票数 3
回答已采纳
我有一些关于html的指令：
<dropdown placeholder='' list='sizeWeightPriceArr' selected='selectedProductSize' property='size' value='size' style='width:60px;'></dropdown>
selectedProductSize =>作用域变量。Basic idea =>我在下拉列表中选择了一些值，这个变量在selected attribu
浏览 0提问于2015-11-28得票数 0
1回答
我有个问题。我用angularjs指令编写了一个HTML页面，这是我的代码
<menufileupload visible="rightVisible" alignment="right">
<input type="text" ng-model='expr'/>
<!--Other stuff-->
</menufileupload>
我试图使用$watch检查文本字段$scope.$watch(.)中的任何更改。只有当文本字段退出指令时才能工作。所以我认为
浏览 1提问于2015-02-20得票数 0
回答已采纳
4回答
侦听指令中的表单提交事件
、、、
我想听一听指令中提交的表单。假设我有这样的指令：
app.directive('myDirective', function () {
return {
restrict: 'A',
require: '^form',
scope: {
smth: '='
},
link: function (scope, el, attrs, formCtrl) {
scope.$watch(function(
浏览 9提问于2014-10-15得票数 8
回答已采纳
我正在尝试获取有关AngularJS应用程序性能的信息。我想知道使用$watch或ng-if是否有任何性能差异，因为我们可以使用其中一种或另一种来获得相同的结果/行为。
请注意，我只使用$watch 来检查数据是否加载了。该指令不需要监视将来的数据更改
例如，我们有一个从Ajax请求中检索数据的控制器和一个需要这些数据的指令。
使用$watch
控制器
angular.module('myApp').controller(
'MyController',
['$scope', 'MyService&
浏览 4提问于2017-01-31得票数 1
1回答
角叶指示角表
、、
我试图将$watch放在角的值上，以不同的方式设置控件，这取决于控制器的指示，并且我已经尝试使用leafletScope.$watch("variable")来跟随中的领导。
我添加了一个具有相等比较的新$watch，因为它是一个对象：
leafletScope.$watch("controls", function(controlOpts) {...}, true)
然后，我在控制器中调用它：
angular.extend($scope, {
controls: {}
}
这是为了初始化控制，因为这似乎是必要的。
然后，在稍后的事件中使用以下方法调用它
浏览 0提问于2015-04-21得票数 0
回答已采纳
2回答
所以我有控制器和指令。我很难理解为什么我的控制器按照我的指令运行。我已经搜索了堆栈，试图找到答案，但似乎大多数答案都是一个案例的基础。
我的控制器最简单的形式是
app.controller('MyCtrl', ['$scope', function ($scope){
$scope.initAddress = {
place_id: "",
geometry: {
location: {
A: "",
F: ""
}
浏览 2提问于2015-12-07得票数 1
回答已采纳
嗨，我有一个控制器，它有一个名为refresh的仿真器和一个$watch
app.controller (..., []) {
$scope.refresh = false;
$scope.$watch('refresh', function() {
if(!$scope.refresh) return;
$scope.apiCall(true);
}, true);
}
我有一个使用refresh的指令。
app.directive('dirA', () => {
浏览 10提问于2022-02-07得票数 0
3回答
在我的控制器中，我在ng-click中设置了一个变量为true。
在我的指令中，当变量为true时，我需要对其进行评估。随后，我通过指令将变量设置为false。
但是，我的问题是，我似乎无法让$watch从ng-click函数触发。
我已经给出了我的问题的一个例子。如您所见，$watch最初在加载页面时将true记录在控制台中。当我单击指令使其成为false时，$watch也会触发并记录false。但是，随后对ng-click按钮的单击不会导致$watch触发。为什么会这样呢？
var app = angular.module('myApp', []);
function
浏览 2提问于2014-10-08得票数 0
回答已采纳
1回答
在我的指令控制器中，我有一个这样的$watch：
$scope.$watch(function () {
return service.abc;
}, function(newVal, oldVal) {
$scope.abc = {abc: newVal};
});
我已经注意到，当在其他控制器中使用时，我遇到了这个变量变得未定义的问题。我设置了另一个手表：
$scope.$watch('abc', function () {
console.log($scope.abc);
});
在这张表中，我看到abc对象使用来自服务的值进行了定义，但随后又变
浏览 0提问于2015-12-16得票数 0
1回答
我有一些嵌套指令：
<first-directive>
<second-directive user="user">
<third-directive name="name">
<fourth-directive description="description">
第一个指令的模板有第二个指令，第二个指令的模板有第三个指令等等。所有指令都有独立的作用域。
第一个指令将user对象设置在自己的作用域上。如果它以同步的方式执行($scope.user = {name: "
浏览 0提问于2014-10-18得票数 2
回答已采纳
作为一个身材魁梧的新手，这是我的问题
如果在HTML中有两个像这样的指令
<parent-dir param="par">
<child-dir></child-dir>
</parent-dir>
在这样的JS中(在父母中)
app.directive('parentDir', function(){
return {
restrict: 'E',
scope: {
param: '='
}
}
})
在孩子身上
app.directive('childD
浏览 5提问于2015-06-26得票数 1
回答已采纳
4回答
在AngularJS中对隔离范围进行单元测试的好方法是什么
指令代码段
scope: {name: '=myGreet'},
link: function (scope, element, attrs) {
//show the initial state
greet(element, scope[attrs.myGreet]);
//listen for changes in the model
scope.$watch(attrs.myGreet, function (name) {
浏览 52提问于2013-06-29得票数 81
回答已采纳
我以区分大小写的方式对字符串数组(示例中有82个元素)中的字符串进行计时，并忽略大小写。
我有点惊讶，平面图的循环比所有其他变体都要快。
当然，这里没有支票，但这里还有其他缺陷吗？
Linq没有在幕后做一些矢量化吗？
我可以使用这些循环吗？
还有其他笔记吗？
代码
class Program
{
static void Main(string[] args)
{
Thread.CurrentThread.CurrentCulture = CultureInfo.InvariantCulture;
StringArrayContains();
浏览 0提问于2020-04-03得票数 1
我正在angularJS中创建一个指令，它将替换元素。我在父作用域中有一个变量，它绑定到元素。
我希望在更改父作用域变量值时更新指令作用域变量。
元素如下所示
<my-element attr-xyz="scope_variable"></myelement>
当我按照下面的方式编写指令时，每当作用域变量更新时，它都会给出更新的值。
.directive('myElement', function(){
return function(scope, elem, attr){
scope.$watch(attr.at
浏览 4提问于2015-09-09得票数 0
回答已采纳
在AngularJS中获取元素似乎是个坏主意，例如：
$('.myElement')
也就是说，控制器不是一种有角度的做事方式。
现在我的问题是，，，我应该如何得到一个角度的东西？
现在，我所做的(并且是一种被接受的方法)是通过观察一个变量，而我的指令基于它做了一些事情。
scope.$watch('varToWatch', function (varToWatch) {
if(attrs.id == varToWatch)
{
//Run my Directive specific code
}
});
然而，虽然这种
浏览 5提问于2014-01-27得票数 0
我有一个父指令，它有一个函数，在服务调用之后加载带有数据的模态div。我已经确认服务正确地返回数据，但是该数据模型从未通过模板传递到子指令的作用域。
请注意，父母指令的scope.warrantymodel是由loadModal函数设置的。还请注意，在父模板中，“保证模型”应该映射到保证指令的“模型”。
我用chrome调试器和batarang调试了代码，但是范围.$watch(‘model’.)在页面加载时调用触发器，但在单击“加载数据”按钮后永不触发。我甚至尝试了范围内的深表开关。$ watch调用(即"true“值)。
app.directive('parentDirec
浏览 4提问于2013-12-31得票数 1
回答已采纳
我遗漏了一些明显的东西。在我的指令中，我有一个有效的双向数据绑定，但是我似乎不能使用$scope.$watch()来监视可能在指令的父作用域js对象上发生的更改。
正如您所看到的，当我尝试在attrs.dirModel上使用$watch时，结果值是未定义的，并且没有进一步监视任何内容，即使我在短暂的延迟之后修改了对象。我还尝试在$watch语句上使用(和不使用) true标志。
HTML：
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src=
浏览 0提问于2013-03-12得票数 12
回答已采纳
很抱歉，如果这个问题已经被回答了，但是我找不到一个能让我满意的文档。
在自定义指令中使用范围.$watch上的链接和控制器函数有什么区别？
var linker = function (scope, element) {
// same watch block
scope.$watch('propertyToWatch', function (value) {
});
element.html(template).show();
$compile(element.contents())(scope);
};
return {
浏览 4提问于2014-11-22得票数 1
回答已采纳
3回答
我有一个名为dir的指令：
ng-model="job.start_date"
comparison-date="job.end_date
在scope.$watch("comparisonDate...中，我想访问我的ng模型值。问题是，未将作用域定义为watch的回调函数。问题是:如何在这个函数中获得ng值？
.directive("dir", function() {
return {
scope: {
comparisonDate: "=",
ngM
浏览 0提问于2013-09-27得票数 0
回答已采纳
我有一个关于组件通信的推理问题。我试图推理但失败的主要问题是:我应该使用什么-- $watch或$on ($ main /$emit)来建立组件之间的通信？
我看到三个基本案例：
控制器+指令。它们使用$scope bidibinding进行自然通信。我只是将服务(它封装了一些共享状态)放在$scope中，使用一些对象($scope.filter = {})。在我看来，这种方法是非常合理的。
控制器+控制器。我使用DI注入具有封装状态的单例服务，以在控制器之间进行通信。这些服务被限制在使用前面方法的指令上。这给了我开箱即用的数据绑定。
指令+指令。这是我推理的盲点。我有一些指令，它
浏览 1提问于2013-10-18得票数 3
很好，
下面的代码似乎适用于较早版本的Angular，但在1.2版本中却不起作用。我不知道这是为什么。在角1.2中发生的情况是，$watch指令没有被击中。它不执行。它确实以角1.0.1执行。
知道为什么吗？
HTML
<fieldset validatedmarker>
<legend>User</legend>
<input type="text" name="name" class="form-control" ng-model="name" required>
浏览 3提问于2014-05-20得票数 0
回答已采纳
我在一个div标记中有一个td标记(在tr标记中)。这个div有一个自定义指令，需要$watch元素的scrollHeight：
<tr ng-show="showRow">
<td>
<div my-custom-directive>My very long text</div>
</td>
</tr>
对于该指令：
appDrct.directive('myCustomDirective', [function() {
return {
浏览 5提问于2015-06-14得票数 1
回答已采纳
在AngularJS中，您可以使用$watch监视模型更改。所以，如果我写这样的东西：
$scope.$watch('model', function (newValue, oldValue) {
// React to the change...
});
当模型...then更改并做一些事情时，可以通知$scope.model。
但是，如果将该model绑定到AngularJS视图(即model.name绑定到HTML页面上的用户名)，则当$watch回调触发时，此更改将尚未传播到DOM。
我的问题是: AngularJS何时将模型更改传播到DOM，以及如何侦听该事件
浏览 2提问于2013-07-04得票数 1
3回答
我试图编写一个指令来创建一个map组件，这样我就可以编写如下内容：
<map></map>
现在，指令看起来如下：
angular.module('myApp')
.directive('map', function (GoogleMaps) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.$watch('selectedCenter', function()
浏览 5提问于2013-09-14得票数 6
回答已采纳
1回答
关于angularjs中的constants的问题。我在app.js中创建了以下常量
... angular
.module('blocTime', ['firebase', 'ui.router'])
.config(config)
.constant('STOP_WATCH', {
"workTime": 1500,
"breakTime": 300
});
})();
我将常量注入
浏览 11提问于2016-09-11得票数 1
回答已采纳
1回答
在angularjs中设置双向数据绑定有两种方法。
双向数据绑定
一种是通过在隔离作用域中定义双向数据绑定：
scope: {
myValue: '='
}
使用$scope.$watch查看更改，并使用$scope.myValue = newVal设置更改。
ng模型
另一种是使用ng-model。使用require: '?ngModel'在你的应用程序中定义这一点。使用$scope.$watch($attributes.ngModel)观察更改，并使用ngModel.$setViewValue设置更改。
显然，两者在方法名称等方面存在差异，但它们在
浏览 0提问于2014-06-20得票数 0
在回答另一个问题时，我意识到我无法通过父指令的属性将子模型传递给父指令。
给定此设置：
<form child-watch mod="inputModel" name="form"><!--ignore creepy directive name-->
<input type="text" name="one" ng-model="inputModel.one">
<input type="text" name="two" ng-mo
浏览 0提问于2013-07-11得票数 0
回答已采纳
我试图有一个指令，当集合接收到更新时更新，但似乎无法触发watch事件(或$watchCollection)。
在我的工厂里，我有一批收藏品
var streams = {
"main":{ stream: streamDetails},
"guest":{ stream: streamDetails}
}
在我的控制器中包含了以下内容
.controller('vidCtrl', function($scope, vidFactory){
$scope.streams = vidFactory.streams;
}
浏览 4提问于2014-07-02得票数 1
回答已采纳
2回答
在angularJS上看约会可以吗？我有一个ng模型，其中包含一个日期，我想看它，所以当它的变化，月，年或日，我收到通知。
scope.$watch('ngModel',function(newVal){
console.log(newVal);
},true);
我有一个控制器，在该控制器中，我将日期对象交给指令。现在我想看那个约会对象。
module.directive('Datepicker',function(){
return {
restrict:'E',
scope:{
ngModel:"="
浏览 1提问于2015-04-20得票数 3
回答已采纳
1回答
$watch在角模态中不工作
、、、、
我试图把$watch放在内部的单选按钮上。但是，$watch没有在模式内部处理任何值更改。
如果我尝试将单选按钮放在模态之外，$watch就会工作得非常好。
在上面的柱塞中，如果单击“打开我”并选择上面的2个单选按钮( me，您) $watch没有被触发，那么您就无法看到带有该值的警报。
但是，如果您单击主页面(即外部窗口)中的单选按钮，$watch将非常好地工作并抛出警报消息。
有人有办法解决这个问题吗？谢谢
浏览 2提问于2014-03-26得票数 4
回答已采纳
2回答
我正在尝试弄清楚如何使子指令与它的父指令通信
我基本上有这个html标记。
<myPanel>
<myData dataId={{dataId}}></myData>
</myPanel>
在myData指令中，如果没有可用的数据，我想隐藏myPanel。
在我尝试过的myData指令控制器中
$scope.$emit('HideParent');
在myPanel控制器中，我尝试过
$scope.$on('HideParent', function () { $scope.hide = true; });
浏览 1提问于2015-04-17得票数 0
4回答
我有以下结构
<div ng-controller='ctrlA'>
<button ng-click='updateFactoryData(data)'></button>
<custom-dir>Custom directive with ctrlB</custom-dir>
<custom-dir>Custom directive with ctrlB</custom-dir>
<custom-dir>Custom directive with
浏览 0提问于2015-09-14得票数 0
1回答
我使用了lib角引导程序，并且有一个重叠指令：
.directive('datepickerPopup', ['$compile', '$parse', '$document', '$position', 'dateFilter', 'dateParser', 'datepickerPopupConfig',
function ($compile, $parse, $document, $position, dateFilter, dateParser, datepi
浏览 2提问于2015-04-04得票数 0
回答已采纳
如果我更改一个控制器变量(变量包含px中的高度，比方说445)，我想在HTML中更新div元素css属性(min高度)。
问题是，指令中的变量总是未定义的。我也尝试过使用$watch，但仍然不起作用。
下面是一个jsfiddle演示：
以下是源代码：
<div ng-app="ctrl">
<div ng-controller="TempCtrl">
<span temp-directive>here we go</span>
</div>
</div>
联署材料：
angu
浏览 6提问于2015-03-17得票数 1
回答已采纳
1回答
我在$scope.raw中有一个食品列表，我想在列中显示这些数据，所以我要稍微修改一下结构。我在sortStuff()函数中这样做，并将更新的数据存储在$scope.allfood中。每当在$watch中发生任何变化时，都有一个调用sortStuff()的$scope.raw (我使用拖放来更改食品类别)：
$scope.$watch('raw', function(){
$scope.allfood = $scope.sortStuff();
console.log($scope.allfood);
}, true);
当食物被拖来拖去时，会发生这样的情况：
浏览 3提问于2013-12-08得票数 5
回答已采纳
2回答
我有一个指令与它的控制器共享数据，我正在使用一个隔离作用域。
但是，当我从指令内部更新数据时，无论是指令还是控制器都看不到使用$watch进行的数据更改。
下面是我要做的事情的一个例子：
var app = angular.module('myApp', []);
app.controller('myAppCtrl', function($scope) {
$scope.buttonSettings = {
val: 0
}
$scope.$watch('buttonSettings.val', function(val)
浏览 2提问于2014-11-13得票数 1
回答已采纳
1回答
在角度超时之后，我试图触发一个$watch：
我的控制器
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.chickens = ["Jim", "Joe", "Fred"];
$scope.chickens.push("Steve");
setTimeout(function () {
$scope.chickens.push("Larry");
$sco
浏览 3提问于2014-07-31得票数 1
回答已采纳
我有using自定义指令
<users stats="stats"></users>
当我们从主控制器更改scope对象时，我还更新了指令scope值
app.directive('users', function(){
var directive = {};
directive.restrict = "E";
directive.templateUrl = "templates/partials/users_stats.html";
directive.scope = {s
浏览 0提问于2016-03-14得票数 1
是否建议始终使用$on方法，如下所示
var dereg = $scope.$on(...)
以及以后的
$scope.$on("$destroy", function() { dereg(); });
或者只在某些情况下才需要这样做？同样的问题也适用于$watch
浏览 0提问于2013-04-27得票数 1
3回答
我有这个指令，它试图观察作用域上的json对象的变化。JSON对象是使用基于restangular的服务检索的，但不知何故，$watch似乎只执行一次，记录“未定义”。
该指令在应用程序的index.html中使用，所以我怀疑这与控制器只适用于特定视图或form...is有关。有没有一种方法可以让指令查看这些更改？
如果有人有更好的建议，我仍然欢迎他们。
服务：
angular.module('main').service('TextsService', function(Restangular) {
this.getTexts = function(
浏览 0提问于2013-07-12得票数 0
假设我有两个可拖的元素
<div draggable enabled="false"></div>
<div draggable enabled="false"></div>
要启用/禁用这些元素，我使用以下指令：
App.directive('draggable', function() {
return {
restrict:'A',
link: function(scope, element, attrs) {
element.draggable();
sco
浏览 3提问于2014-10-20得票数 0
回答已采纳
有很大的数据集，我想在其中搜索一些数据。当我在textbox中写一些字符串时，它会为我在输入中写的每个字母提交或$watch。如何对其进行优化？在angularjs中有针对此的指令或对象吗？我想我可以用setTimeout函数来处理它。当用户停止编写时，我可以调用$watch函数。使用angularjs有什么简单或正确的方法吗？
浏览 15提问于2017-01-24得票数 1
回答已采纳
问题：
我试图在一个具有严格属性的数字输入的ng模型上使用$scope.$watch方法，例如，max、min、maxlength和step。
当插入到输入中的值超过任何这些属性时，ng模型将检索undefined。
因此，最终发生的情况是:每次我们在输入中更改值时都会触发$scope.$watch。一旦该值未定义，则仅当插入的值再次为有效时才会再次触发，换句话说，它遵循属性规则(最大、最小、最大长度和步骤)。
，例如
用户输入：-2,4 -> $scope.$watch被触发，并输出newValue为undefined。
用户添加一个新的数字：-2,44 -> $scope.
浏览 4提问于2017-06-03得票数 0
回答已采纳
在完成$watch函数并呈现html之后，是否仍然要侦听事件？
scope.$watch('treeData', on_treeData_change, true);
on_treeData_change = function() {
var add_branch_to_list, root_branch, _i, _len, _ref, _results;
for_each_branch(function(b, level) {
if (!b.uid) {
return b.uid = "" + Math.ra
浏览 3提问于2015-01-31得票数 0
回答已采纳
1回答
我有一个非常具体的问题，指令以某些字母(t，u，v，w，y，z)开头。该指令用于select元素，并监视ngOptions更改。
当ngOptions被来自Ajax请求的数据填充时，指令名以某个字母开头，例如w，则在创建select选项之前触发第二个watch回调。如果指令名以不同的字母(a、k、m、n)开头，则在创建选项之后，第二个watch回调会触发。
具有多个指令，以不同的字母开头。打开控制台查看问题。
<select w-foo ng-model="bar" ng-options="o.name for o in options"></
浏览 5提问于2014-06-03得票数 1
回答已采纳
目前，我们可以通过多种方式监视数据的变化。我们可以使用$watch触发模型更改，还可以向元素添加指令并将一些操作绑定到元素中。
在许多情况下，这有点让人困惑，所以我很好奇，这是每个变体的优缺点，以及我们何时应该使用$watch绑定，以及什么时候使用ng-change之类的指令
浏览 4提问于2013-09-25得票数 49
回答已采纳
1回答
双向数据绑定指令不起作用
、、、
我有一个控制器，用来添加任务。在该页面上，用户需要选择要操作的组。我编写了一个指令，用于允许用户选择组(文件夹)。
我的页面控制器
function AddTaskController($scope) {
var vm = this;
vm.group = { whatsit: true };
$scope.$watch("vm.group", function () {
console.log("controller watch", vm.group);
},true);
}
使用指令的页面html。
<
浏览 4提问于2015-11-17得票数 2
回答已采纳
在ngModelController示例的Angular文档中，javascript文件如下所示：
angular.module('customControl', []).
directive('contenteditable', function() {
return {
restrict: 'A', // only activate on element attribute
require: '?ngModel', // get a hold of NgM
浏览 5提问于2013-06-12得票数 3
假设这个监视在一个指令中，那么从主控制器监视一个变量是可能的吗？下面是整个指令。当它看起来像这样时，手表确实会在第一次页面加载时触发，但之后再也不会触发。我不会将questionNumber传递给指令。这就是它没有意识到它的原因吗？
.directive('videoLoader', function () {
return function (scope, element, attrs) {
scope.$watch(attrs.videoLoader, function () {
element[0].load();
elem
浏览 2提问于2013-03-02得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
