angularjs $watch ng-include 中的变量引发的问题

本文详细记录了在使用AngularJS进行项目开发时遇到的问题,特别是关于作用域链的问题,通过调整代码结构成功解决了无法实时更新界面的问题。包括了如何在使用ng-include引入的组件中正确监控变量变化的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近接触一个新项目,用到了angularjs,之前对angularjs不熟悉,于是就被坑了,在这里小计一下。
我有两个文件,文件a.html内容如下:

<html>
     <head>
          <script src='angular.js'></script>
     </head>
     <body>
          <div ng-app="myApp" ng-controller="userCtrl">
               <div ng-include="'b.html'"></div>
          </div>
          <script>
               var app = angular.module('myApp',[]);
               app.controller('userCtrl',function($scope){
                    $scope.name = 'blakeFez';
                    $scope.$watch('name',function(){
                         console.log('change');
                    });
               });
          </script>
     </body>
</html>

文件b.html内容如下:

<input ng-model='name' type='text'/>
<div>{{name}}</div>

用浏览器打开a.html发现,当我改变name的值时,控制台并没有输出任何东西。

把a.html改成如下:

<html>
     <head>
          <script src='angular.js'></script>
     </head>
     <body>
          <div ng-app="myApp" ng-controller="userCtrl">
               <div>
                    <input ng-model='name' type='text'/>
               </div>
          </div>
          <script>
               var app = angular.module('myApp',[]);
               app.controller('userCtrl',function($scope){
                    $scope.name = 'blakeFez';
                    $scope.$watch('name',function(){
                         console.log('change');
                    });
               });
          </script>
     </body>
</html>

这样就可以正常工作了。
后来谷歌的一下,发现,上述问题是由于作用域链问题导致的。使用ng-include引入的东东,里面的变量是在当前scope的child scope中。可以使用如下方法:
把b.html中的变量改成 data.name,在a.html中定义 $scope.data = {name:’linyu’};然后监控 data.name。代码如下:

文件a.html内容如下:

<html>
     <head>
          <script src='angular.js'></script>
     </head>
     <body>
          <div ng-app="myApp" ng-controller="userCtrl">
               <div ng-include="'count.html'"></div>
               <input ng-model='data.name2' type='text'/>
          </div>
          <script>
               var app = angular.module('myApp',[]);
               app.controller('userCtrl',function($scope){
                    $scope.data = {name:'linyu'};
                    $scope.$watch('data.name',function(){
                         console.log('ddd');
                    });
               });
          </script>
     </body>
</html>

文件b.html内容如下:

<input ng-model='data.name' type='text'/>
<div>{{data.name}}</div>

这样就可以在使用ng-include的情况下,正常监控了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值