有没有办法使用多个对象订阅事件 $watch
例如
$scope.$watch('item1, item2', function () { });
Run Code Online (Sandbox Code Playgroud) 对于观看的对象范围内的变量,是$scope.$watch用objectEquality设置为true或$scope.$watchCollection更好?
对于一个$scope对象变量(如15点的属性,一些嵌套2级深)与输入元件和更新ng-model在视图中,是怎样坏$scope.$watch与objectEquality设置为true?这是一件要避免的大事吗?
是$watchCollection更好的解决方案吗?
我正在寻找轻松获胜以提高我的AngularJS App的性能(我仍然坚持v1.2.2).
// ctrl scope var
$scope.filters = {
name: '',
info: {test: '', foo: '', bar: ''},
yep: ''
// etc ...
}
// ctrl watch ?
$scope.$watch('filters', function(newVal, oldVal) {
if(newVal !== oldVal) {
// call with updated filters
}
}, true);
// or ctrl watch collection ?
$scope.$watchCollection('filters', function(newVal, oldVal) {
if(newVal !== oldVal) {
// …Run Code Online (Sandbox Code Playgroud) 以下是角度的文档.我正在观察几个变量,这些变量是构建过滤字符串的范围的一部分ng-grid.当这个范围被销毁时,我是否需要通过调用返回值来取消监视它们$scope.$watch,或者是否足以破坏范围?如果被监视的变量不属于此范围,该怎么办?
如果我没有"监视"与范围一起被销毁的变量,我是否会泄漏内存/导致性能问题.
$destroy()从父作用域中删除当前作用域(及其所有子作用域).删除意味着调用$digest()将不再传播到当前范围及其子项.删除还意味着当前范围符合垃圾收集的条件.
在$destroy()通常使用的指令,如ngRepeat用于管理环的展开.
在销毁范围之前,$destroy会在此范围内广播一个事件.应用程序代码可以注册一个$destroy事件处理程序,使其有机会执行任何必要的清理.
请注意,在AngularJS中,还有一个$destroyjQuery事件,可以在从DOM中删除元素之前清除DOM绑定.
假设一个给定的形式<form name="myForm">,使用一个简单的手表很容易观察有效性,错误,脏状态等:
$scope.$watch('myForm.$valid', function() {
console.log('form is valid? ', $scope.myForm.$valid);
});
Run Code Online (Sandbox Code Playgroud)
但是,如果此表单中的任何给定输入已更改,则似乎没有简单的方法可以观察.如此深入观察,不起作用:
$scope.$watch('myForm', function() {
console.log('an input has changed'); //this will never fire
}, true);
Run Code Online (Sandbox Code Playgroud)
$watchCollection只有一个深度,这意味着我必须为每个输入创建一个新的手表.不理想.
什么是优雅的方式来观看表单以便在任何输入上进行更改而无需借助多个手表或放置ng-change每个输入?
请看下面给出的截图
正如您在上面的屏幕截图中看到的,单个绑定有#3观察者.
任何人都可以详细说明为什么会如此?
PS:我正在使用AngularJS Batarang来检查性能.
var app = angular.module('app', []);
app.controller('appCtrl', function ($scope, $timeout) {
$scope.name = 'vikas bansal';
})Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="appCtrl">
{{name}}
</div>
</body>
</html>Run Code Online (Sandbox Code Playgroud)
我的单页应用程序有2个控制器:第一个用于我的主菜单,第二个用于视图.他们与这家工厂共享数据
myApp.factory('MenuFactory', function(){
var factory = {
Monitor: "doneJob",
Control: "",
Report: "",
Display: "",
setMonitor: function(value){
factory.Monitor = value;
},
setControl: function(value){
factory.Control = value;
},
setReport: function(value){
factory.Report = value;
},
setDisplay: function(value){
factory.Display = value;
}
};
return factory;
});
Run Code Online (Sandbox Code Playgroud)
我想看看改变factory.Control,但我不能让它有效.
当我尝试这个:
$scope.$watch(function(){MenuFactory.Control}, function(NewValue, OldValue){
console.log(NewValue + ' ' + OldValue);
console.log(MenuFactory.Control);
}, true);
Run Code Online (Sandbox Code Playgroud)
我在控制台中得到"undefined undefined"和"Process".这个工厂的$ watch实现有什么问题吗?
javascript angularjs angularjs-scope angularjs-factory angularjs-watch
我正在使用Angular-Bootstrap Carousel指令,并在其上进行一些更改。轮播有ng-repeat幻灯片。
我试图通过将左右控件悬停而不是单击来转到下一张/上一张幻灯片。并通过更改object.active状态来实现(以前为false-新为true)
无论如何,几轮之后,我所有的物体都active=false摆好了,转盘什么也没显示。在调试数组并$watch在每个对象上发现错误后,是因为该指令以某种方式更改了active=false我不希望的时间。
长话短说:我能以某种方式获取我正在使用的范围内的对象的调用堆栈$watch吗?
例如,我的监视代码如下:
$scope.$watch('requestFilters[0]', function(obj) {
console.log('Item 0 changed');
}, true);
Run Code Online (Sandbox Code Playgroud) 在Angular中被视为" 观察者 "的是什么?观察者本身是观察者的唯一类型,还是其他角色结构,如ngModel观察者?
还是我错过了大局?例如,观察者是什么使指令ngModel能够工作?
更新:有没有办法告诉谁有观察者?在测试中我想知道何时调用范围.$ digest()
我已经创建了一个应用程序是angularjs,其中我有一个指令,我正在指令中的一个监视器,当$ rootScope变量发生更改时触发指令中的某些方法,但问题是当$ rootScope.name值被更改指令内的手表不起作用
我的代码如下所示
var module = angular.module('myapp', []);
module.controller("TreeCtrl", function($scope, $rootScope) {
$scope.treeFamily = {
name : "Parent"
};
$scope.changeValue = function()
{
$rootScope.name = $scope.userName;
};
});
module.directive("tree", function($compile) {
return {
restrict: "E",
transclude: true,
scope: {},
template:'<div>sample</div>',
link : function(scope, elm, $attrs) {
function update()
{
};
scope.$watch('name', function(newVal, oldVal) {
console.log('calling');
update();
}, true);
}
};
});
Run Code Online (Sandbox Code Playgroud) 我的 $scope 中有一个对象,其中包含一些属性,例如以下属性:
$scope.content = {
name : 'myname',
description : 'mydescription',
keyword : 'some keyword'
}
Run Code Online (Sandbox Code Playgroud)
现在我想听听每个属性的每一个变化。我在其自己的对象上设置了监视,但无法更改其属性(其属性是通过绑定到某些输入字段从 UI 更改的)。
$scope.$watch('content', function(){
// do some work
}
Run Code Online (Sandbox Code Playgroud)
当我如下设置监视某些属性时,我可以获取该属性的更改。
$scope.$watch('content.name', function(){
// do some work
}
Run Code Online (Sandbox Code Playgroud)
有没有办法在不设置所有属性的监视的情况下监听对象属性的变化?
我在控制器中设置了以下观察器:
var embeds = {twitter: false, facebook: false};
$scope.$watch(embeds, function(newVal, oldVal) {
if(embeds.twitter && embeds.facebook) $scope.loading = appLoader.off();
});
Run Code Online (Sandbox Code Playgroud)
这应该在embeds更改时触发.我有以下功能,检查我的所有嵌入式推文和Facebook帖子是否已加载到页面.当加载所有推文或Facebook帖子时,它会embeds在一个$timeout块内更新,以触发摘要周期.
checkFBInit();
twttr.ready(function(twttr) {
twttr.events.bind('loaded', function(event) {
$timeout(function() {
embeds.twitter = true;
});
});
});
function checkFBInit() {
// Ensure FB.init has been called before attempting to subscribe to event
var fbTrys = 0;
function init() {
fbTrys++;
if (fbTrys >= 60) {
return;
} else if (typeof(FB) !== 'undefined') {
fbTrys = 60;
FB.Event.subscribe('xfbml.render', …Run Code Online (Sandbox Code Playgroud) angularjs-watch ×11
angularjs ×10
javascript ×6
watch ×2
callstack ×1
carousel ×1
events ×1
forms ×1
hover ×1