angularjs $scope.$watch 遇到的问题

最新推荐文章于 2020-01-20 12:35:22 发布
原创 最新推荐文章于 2020-01-20 12:35:22 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了AngularJS中使用$scope.watch监听对象变化的方法，并指出当监听器内部使用$scope.$broadcast广播事件时可能引发的问题。如果在监听回调中触发广播事件，可能会导致广播事件被多次触发，进而引起执行错乱。

angularjs可以使用$scope.watch监听对象的变化

			$scope.prizeDrawRecordId = prizeDrawRecord.id;
			
			$scope.$watch('prizeDrawRecordId' , function(newValue , oldValue){
				if(oldValue != newValue)
				{
					$scope.showMask = true;
				}
			});

但是如果在监听里面用到广播事件 就会出问题 

			$scope.prizeDrawRecordId = prizeDrawRecord.id;
			
			$scope.$watch('prizeDrawRecordId' , function(newValue , oldValue){
				if(oldValue != newValue)
				{
					$scope.showMask = true;
					$scope.$broadcast('FlashProductLineActive');
				}
			});







这时候就会发出 监听次数 个 ‘FlashProductLineActive’ ， 使接收广播的地方会执行 监听次数 个线程 ， 造成错乱。



                

        

    


  



    

      

        

            

              
                
                  gptancy
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
浅谈关于angularJs中使用$.ajax的注意点

				
			

			

				

					10-19
				

			

		

		

			
				
当不得不使用$.ajax时，遇到的第一个挑战是数据绑定的问题。AngularJS的双向数据绑定依赖于脏值检测机制，其中包括$watch和$digest循环。$.ajax的回调函数中的数据更新不会自动触发AngularJS的脏值检测，所以视图层...

			
		

	



                

            
              



	

		

			

				
					
浅谈angularJS的$watch失效问题的解决方案

				
			

			

				

					10-19
				

			

		

		

			
				
然而在使用过程中，开发者可能会遇到$watch失效的问题，即期望的监视函数没有被触发，这通常由多种原因造成，包括但不限于错误地监视复杂数据结构、不正确地处理函数返回值等。  ### $watch失效的常见原因及解决方案...

			
		

	



              


  
              

                


	

		

			

				
					
AngularJS v1.6.3，监听数据变化$scope.$watch不生效问题

				
			

			

				

					DOBEONE玉苑的博客
				

				

					11-09
					
					2853
					
				

			

		

		

			
				
在页面使用数据绑定，并且监听的时候发现了$scope.$watch并不生效

			
		

	





	

		

			

				
					
关于angularJS的$watch的 一些小用法

					
热门推荐

				
			

			

				

					u010451286的博客
				

				

					02-04
					
					4万+
					
				

			

		

		

			
				
$watch方法，它可以帮助我们在每个scope中监视其中的变量。$watch 单一的变量对于普通的变量时，如数字，字符串等，直接如下写是可以监视到变量的变化，并执行相应的函数的。$scope.count=1;
$scope.$watch('count',function(){
...
});$watch 多个变量对于多个变量的监视变化，执行同一函数的话，可以将这几个变量转为字符串，以‘+’号隔开来

			
		

	



		

			
		



	

		

			

				
					
angularjs $scope.$watch(),监听值得变化

				
			

			

				

					weixin_34054931的博客
				

				

					12-30
					
					160
					
				

			

		

		

			
				
myApp.controller('firstController',function($scope,$interval){
   $scope.date = new Date();
    setInterval(function(){
        $scope.$apply(function(){
            $scope.date = new Date();
 ...

			
		

	





	

		

			

				
					
angularjs 删除作用域时清除$watch

				
			

			

				

					汤健斌的博客
				

				

					05-05
					
					3249
					
				

			

		

		

			
				
先看下面一段代码




    
    





    
        
    
    删除内容
    查看作用域
    输入内容: 



    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope, $compile) {
        $scope.n

			
		

	





	

		

			

				
					
Angular.watch性能问题和ngInfiniteScroll

				
			

			

				

					chajinglong的专栏
				

				

					03-16
					
					1502
					
				

			

		

		

			
				
angular能够满足很大一部分的开发，也足够replace jquery，下面我们来谈谈angular一些功能的好处
        双向绑定是Angular的核心概念之一，它给我们带来了思维方式的转变：不再是DOM驱动，而是以Model为核心，在View中写上声明式标签。然后，Angular就会在后台默默的同步View的变化到Model，并将Model的变化更新到View。
 
    

			
		

	





	

		

			

				
					
组织树渲染时候正常但在点击选择时会卡顿，如何处理$scope.selectTreeUser = function(e){
		var options = {
			bootstrap2 : false,
			showTags : true,
			levels : 5,
			showCheckbox : true,
			checkedIcon : "glyphicon glyphicon-check",
			collapseIcon : "glyphicon glyphicon-minus",
			emptyIcon : "glyphicon",
			multiSelect : false,
			checkbarType : "all",
			uncheckedIcon : "glyphicon glyphicon-unchecked",
			data : buildDomTree(userList),
			onStatusChanged : function(data) {
				if (data.type == "user") {
					$scope.assignment.assignee = data.text;
					$scope.assignment.assigneeId = data.id;
					$scope.assignment.dept = false;
					$scope.$apply();
					angular.element("#treeview").hide();
				} else {
					angular.element('.alert').html('请选择具体人员').addClass('alert-success').show().delay(1500).fadeOut();
				}
				window.event? window.event.cancelBubble = true : e.stopPropagation();
			},
			onClearAll : function(){
				$scope.assignment.assignee = "";
				$scope.assignment.assigneeId = "";
				$scope.assignment.dept = false;
				$scope.$apply();
				window.event? window.event.cancelBubble = true : e.stopPropagation();
			}
		};执行onStatusChanged时会卡顿

					
最新发布

				
			

			

				

					08-27
				

			

		

		

			
				
你遇到的问题是：  > **组织树渲染正常，但在点击选择节点时（即执行 `onStatusChanged` 回调函数）出现卡顿**。  ---  ## ✅ 问题定位分析  ### 卡顿原因分析  你在 `onStatusChanged` 回调中执行了如下操作：  ```...

			
		

	





	

		

			

				
					
// AI实时分析
app.directive('aiRealTimeAnalytics', function () {
    // 提报工单
    return {
        restrict: 'E',
        replace: true,
        scope: {
            alarmData: "="
        },
        template: `<div class="ai-analytics-dashboard">
            <div id="open_ai_analytics_dashboard" ng-click="firstWebSocket()"></div>
            <div id="close_ai_analytics_dashboard" ng-click="closeWebSocket()"></div>
            <div class="ai-analytics-line"></div>
            <real-time-analytics-ai ngsend-message="ngsendMessage" ng-show="alarmData.response == 0" alarm-data="alarmData" can-ask="canAsk"></real-time-analytics-ai>
            <real-time-analytics-record ng-show="alarmData.response == 1" ai-answer="alarmData.aiAnswer" alarm-data="alarmData"></real-time-analytics-record>
        </div>
        `,
        controller: function ($scope) {
            $scope.canAsk = true, $scope.intervalHeart = null;

            // DOM 元素引用
            const messagesBox = document.getElementById('messagesBox');
            const userInput = document.getElementById('userInput');
            const sendBtn = document.getElementById('sendBtn');
            const statusIndicator = document.getElementById('status');

            // WebSocket 配置
            let ws = null;
            let responseBuffer = '';
            const token = getStorageToken();
            const WS_ENDPOINT = `${_protocol === 'http:' ? 'ws' : 'wss'}://${_host + "/" + _apiPath}/knowledgeServer`; // 需替换为实际地址

            // 初始化 WebSocket 连接
            function initWebSocket() {
                ws = new WebSocket(WS_ENDPOINT, [token]);

                // 连接事件处理
                ws.onopen = () => {
                    updateUIStatus('connected', '连接已建立');
                    $scope.intervalHeart && clearInterval($scope.intervalHeart);
                    $scope.intervalHeart = setInterval(_ => {
                        ws.send(JSON.stringify(''));
                    }, 1000)

                    $scope.canAsk = true;
                };

                ws.onmessage = handleMessage;
                ws.onerror = handleError;
                ws.onclose = handleClose;
            }

            // 消息处理
            function handleMessage(event) {
                const data = JSON.parse(event.data);
                switch (data.isLast) {
                    case false:
                        responseBuffer += data.receivedMsg;
                        updateLastMessage(markdownToHTML(responseBuffer));
                        break;
                    case true:
                        finalizeMessage(markdownToHTML(responseBuffer));
                        responseBuffer = '';
                        $scope.canAsk = true;
                        break;
                    case 'error':
                        appendMessage(`系统错误: ${data.message}`, 'system');
                        $scope.canAsk = true;
                        break;
                }
            }

            // 错误处理
            function handleError(error) {
                console.error('WebSocket 错误:', error);
                updateUIStatus('error', '连接异常，正在重连...');
                setTimeout(initWebSocket, 3000);
            }

            // 关闭处理
            function handleClose(event) {
                if (!event.wasClean) return;
                updateUIStatus('disconnected', '连接已断开');
                $scope.canAsk = false;
            }

            // 消息发送
            function sendMessage() {
                if ($scope.canAsk) {
                    $scope.canAsk = false;
                    const text = userInput.value.trim();
                    if (!text || !ws || ws.readyState !== WebSocket.OPEN) return;

                    const message = {
                        businessType: 'alarm',
                        requestType: 'question',
                        question: text,
                        "zpRequestId": "deepCtrl-a2eb3c18d1272ccb43c78db889a2de28",
                        "curRequestIndex": "",
                        "t": getStorageToken(),
                        "modelSource": 1
                    };

                    ws.send(JSON.stringify(message));
                    appendMessage(text, 'user');
                    userInput.value = '';
                    createPendingMessage();
                }
            }

            // 辅助函数
            function appendMessage(text, type) {
                const messageDiv = document.createElement('div');
                messageDiv.className = `message ${type}-message`;
                messageDiv.innerHTML = text;
                messagesBox.appendChild(messageDiv);
                messagesBox.scrollTop = messagesBox.scrollHeight;
                return messageDiv;
            }

            function createPendingMessage() {
                const pending = appendMessage(`<div class="dots">
                                                                        <span>思考中</span>
                                                                      <span class="dot"></span>
                                                                      <span class="dot"></span>
                                                                      <span class="dot"></span>
                                                                    </div>`, 'ai');
                pending.style.opacity = '0.6';
                return pending;
            }

            function updateLastMessage(content) {
                const lastMsg = messagesBox.lastElementChild;
                if (lastMsg?.classList.contains('ai-message')) {
                    lastMsg.innerHTML = content;
                    messagesBox.scrollTop = messagesBox.scrollHeight;
                }
            }

            function finalizeMessage(content) {
                const lastMsg = messagesBox.lastElementChild;
                if (lastMsg?.classList.contains('ai-message')) {
                    lastMsg.innerHTML = content;
                    lastMsg.style.opacity = '1';
                }
            }


            function updateUIStatus(state, message) {
                statusIndicator.textContent = message;
                statusIndicator.style.color = {
                    connected: '#28a745',
                    error: '#dc3545',
                    disconnected: '#6c757d'
                }[state] || '#000';
            }


            /**
             * 设置处理消息
             */
            function setDealMessage(aiAnswer) {
                if (aiAnswer) {
                    let content = markdownToHTML(aiAnswer);
                    const firstMsg = messagesBox.firstElementChild;
                    if (firstMsg?.classList.contains('ai-message')) {
                        firstMsg.innerHTML = content;
                        messagesBox.scrollTop = messagesBox.scrollHeight;
                    }
                }
            }

            // 事件监听
            userInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') sendMessage();
            });


            /**
             * ng 发送
             */
            $scope.ngsendMessage = () => {
                sendMessage();
            }

            //打开弹窗
            $scope.firstWebSocket = () => {
                setDealMessage($scope.alarmData.aiAnswer);
                initWebSocket();
            };


            /**
             * 关闭连接
             */
            $scope.closeWebSocket = () => {
                $scope.intervalHeart && clearInterval($scope.intervalHeart);

                // 已关闭记录清空
                const ai_record_scroller = document.getElementById('ai_record_scroller');
                ai_record_scroller.innerHTML = "";
                // 未关闭记录,ai对话
                messagesBox.innerHTML = `<div class="message ai-message"></div>`;
                userInput.value = '';
                // 主动关闭连接 1000 表示正常关闭
                ws.close(1000, '用户主动断开');
            }

        }
    }
});
app.directive('realTimeAnalyticsAi', function () {
    // 提报工单
    return {
        restrict: 'E',
        replace: true,
        scope: {
            alarmData: "=",
            canAsk: "=",
            ngsendMessage: "="
        },
        template: `<div>
            <div class="ai-analytics-title">AI实时分析 <span>由 DeepSeek 驱动</span></div>
            <div class="chat-container">
                <div class="status-indicator hide" id="status">连接中...</div>
                <div class="messages-box" id="messagesBox">
                    <div class="message ai-message"></div>
                </div>

                <div class="input-area">
                    <div class="input-group">
                        <input type="text" id="userInput" placeholder="支持深度追问分析" ng-disabled="!canAsk">
                        <button id="sendBtn" ng-click="ngsendMessage()" ng-disabled="!canAsk"><div class="ai-analytics-send"></div>发送</button>
                    </div>
            </div>
        </div>
        `,
        controller: function ($scope) {

        }
    }
})

app.directive('realTimeAnalyticsRecord', function () {
    // 提报工单
    return {
        restrict: 'E',
        replace: true,
        scope: {
            aiAnswer: "=",
            alarmData: "="
        },
        template: `<div>
            <div class="ai-analytics-title">处理详情 <span>由 deepseek 驱动</span></div>
            <div class="ai-analytics-record">
                <div id="ai_record_scroller" class="ai-record-scroller">
                
                </div>
            

                <div class="ai-record-deal">
                    <span data-language="alarm.unclosed_alarms.dialog.processing_record" data-language-format="{0}：">处理记录：</span>
                <span ng-bind="dealResult(alarmData)"
                      ng-class="alarmData.alarmCloseRemark?'decoration-blue':''"></span>
                </div>
            </div>
             
        </div>
        `,
        controller: function ($scope) {

            const ai_record_scroller = document.getElementById('ai_record_scroller');


            $scope.setAIAnswer = () => {
                if ($scope.aiAnswer) {
                    ai_record_scroller.innerHTML = markdownToHTML($scope.aiAnswer);
                    ai_record_scroller.style.opacity = '1';
                }

            }


            $scope.$watch('aiAnswer', function () {
                $scope.setAIAnswer();
            })

            /**
             * 处理结果
             */
            $scope.dealResult = function (alarm) {
                if (alarm.status == 1) {
                    return languageSwitch('alarm.unclosed_alarms.dialog.auto_recovery');
                } else if (alarm.alarmCloseTime != null) {
                    return alarm.alarmCloseRemark ? languageSwitch('alarm.alarm_overview.table.manual_close') + '(' + alarm.alarmCloseRemark + ')' : languageSwitch('alarm.alarm_overview.table.manual_close');
                } else if (alarm.configRuleTypeEditTime != null) {
                    return alarm.alarmCloseRemark ? languageSwitch('alarm.alarm_overview.table.alarm_type_adjustment') + '(' + alarm.alarmCloseRemark + ')' : languageSwitch('alarm.alarm_overview.table.alarm_type_adjustment');
                } else {
                    return "";
                }
            };
        }
    }
}) 兼容chorme 74.0.3792.6版本

				
			

			

				

					07-02
				

			

		

		

			
				
Chrome 74支持模板字符串，但如果遇到问题可以改用字符串连接。  **解决方案**： ```javascript // 修改前 const WS_ENDPOINT = `${_protocol === 'http:' ? 'ws' : 'wss'}://${_host + "/" + _apiPath}/...

			
		

	





	

		

			

				
					
深入理解AngularJS中的$scope和$rootScope

				
			

			

				

					
				

			

		

		

			
				
# 章节一：介绍AngularJS中的$scope和$rootScope  在本章中，我们将深入介绍AngularJS中的作用域(scope)和根作用域($rootScope)，包括其概念、作用和使用方法。理解作用域是理解AngularJS框架的核心部分之一，对于...

			
		

	





	

		

			

				
					
angular之scope.$watch

				
			

			

				

					weixin_30847271的博客
				

				

					07-07
					
					174
					
				

			

		

		

			
				
　　某“大神”挖了个陨石坑，我于是乎似懂非懂的接手，玩了一个月angular。现在项目告一段落，暂别了繁重的重复性工作，可以开始回顾、认真的折腾下之前犹抱琵琶的angular。
　　angular吸引人的特性之一就是双向绑定，model有变化view自动更新。一说到自动执行，首先浮到脑海的必须是监听和回调函数。angular也确实是这样做的，scope.$watch就是此行为的接口。一如所有的类...

			
		

	





	

		

			

				
					
angularJS<$scope里的$watch方法>

				
			

			

				

					zyy_0725的博客
				

				

					12-04
					
					1877
					
				

			

		

		

			
				
$scope里的$watch方法,angularJS

			
		

	





	

		

			

				
					
angular-------$scope.$watch用法

				
			

			

				

					Bidding
				

				

					12-02
					
					1699
					
				

			

		

		

			
				
$watch()函数，用于监视模型数据的变化。

$watch(参数1,参数2,参数3)

      参数1：监视的对象

      参数2：监视数据改变执行的函数

      参数3：[可选]，布尔值-默认为fasle：不监视对象深层属性，true：监视对象深层属性。

1. 监听单个普通变量

$scope.$watch("name", functio...

			
		

	





	

		

			

				
					
AngularJs学习笔记(4)--$scope里的$watch方法

				
			

			

				

					weixin_33970449的博客
				

				

					06-12
					
					673
					
				

			

		

		

			
				
本文主要接住前文简单介绍一下angular中的$watch方法在前面介绍过$apply方法中提到过脏检查，首先apply方法会触发evel方法，当evel方法解析成功后，会去触发digest方法，digest方法会触发watch方法。(1)$watch简介在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。AngularJS内部的watc...

			
		

	





	

		

			

				
					
angularJS $scope的$watch方法监听model改变

				
			

			

				

					xuanwuziyou的专栏
				

				

					10-12
					
					6547
					
				

			

		

		

			
				
$scope有个$watch方法，可以监听指定的model的改变，一旦model改变则触发（执行）传入其中的方法，该方法接收三个参数，如下
$scope.$watch('要监听的model名' , function(newValue,oldValue){  }, bool值指示是否监听的是对象)，
其中newValue指向所监听的model，即两者是一回事，而oldValue则是所监听mode

			
		

	





	

		

			

				
					
angularjs上传图片并转换成base64保存到数据库

				
			

			

				

					海阔天空的专栏
				

				

					03-28
					
					9967
					
				

			

		

		

			
				
1、前台：
jsp


    <a href="javascript:;"
       style="position: absolute;width: 100%;height: 100%;">
        
            
            
        
        
    
jsvar limitSize = 1 * 1024 * 1024;
  $s

			
		

	





	

		

			

				
					
Angular 事件监听$scope.$watch

				
			

			

				

					weixin_43294560的博客
				

				

					01-20
					
					1185
					
				

			

		

		

			
				
监听服务$watch
	1、不需要在控制器脚本中注入,直接使用
	2、监听任何想要监听的NG变量的值,并在这个值改变的时候调用回调函数

	语法:$scope.$watch('想要监听的NG变量(不需要加$scope.)或字符串',回调函数)

代码示例:
<html ng-app='app' ng-controller='main' >
<head>
	<meta ...

			
		

	





	

		

			

				
					
Angular中$scope的$watch

				
			

			

				

					qq_30937147的博客
				

				

					01-25
					
					773
					
				

			

		

		

			
				
Angular中scope的scope的watch$watch的作用
apply触发脏检查实际上是通过apply触发脏检查实际上是通过digest，而当digest执行时，如果watch观察的value与上次执行的不一样时，就会触发。
$watch可以对Angular的model进行监听，判断model值是否发生改变，可以获取到旧值和新值。
$watch的用法刚刚说了watch可以对一个model进

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值