• AngularJS实现一次监听多个值发生的变化（angular监听事件）
• angularjs $watch监听模型变化
• AngularJS $监视元素宽度的变化
• angularjs -- 监听angularJs列表数据是否渲染完毕
• angularjs – Angular ui布局 – 当某些内容发生变化时如何刷新大小？

AngularJS实现一次监听多个值发生的变化（angular监听事件）

一、$watch简单使用

$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下：

watchExpression：监听的对象，它可以是一个angular表达式如''name'',或函数如function(){return $scope.name} 。

listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)

objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

举个栗子：

$scope.name = ''hello'';

var watch = $scope.$watch(''name'',function(newValue,oldValue, scope){

    console.log(newValue);

    console.log(oldValue);

});

$timeout(function(){

    $scope.name = "world";

},1000);

二、监听多个值的变化

大家通常遇到的情况为通过$watch()一次监听一个值的变化，当然这种时候满足绝大部分情况。但是通过阅读官网对于$watch()的解释，$watch()还有第三个参数，第三个参数是一个布尔类型，表示是否深度监听，深度监听的例子就是是否进行比较对象的属性。

这样我们就可以实现一次监听多个值的变化。

示例代码

var app=angular.module("watchApp",[])
      .controller("watchController",["$scope",function($scope){
         $scope.object={};
         $scope.object.one=$scope.one;
         $scope.object.one=$scope.one;
         $scope.$watch("object",function(){
            .....
          },true);
      }])

总结

以上就是关于AngularJS如何一次监听多个值发生变化的全部内容，大家都学会了吗？希望这篇文章的内容对大家的学习和工作能有所帮助，如果有疑问可以留言交流，谢谢大家对的支持。

angularjs $watch监听模型变化

$watch简单使用

$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

$watch(watchExpression,listener,objectEquality);

每个参数的说明如下：

1. watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。

2. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值),oldValue(旧值),scope(作用域的引用)

3. objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化.如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值,那么你应该使用它

举个栗子：

$scope.name ='hello';

var watch =$scope.$watch('name',function(newValue,oldValue,scope){

console.log(newValue);

console.log(oldValue);

});

$timeout(function(){

$scope.name ="world";

},1000);

$watch性能问题

太多的$watch将会导致性能问题，$watch如果不再使用，我们最好将其释放掉。

$watch函数返回一个注销监听的函数，如果我们想监控一个属性，然后在稍后注销它，可以使用下面的方式：

var watch =$scope.$watch('someModel.someProperty',callback);

//...

watch();

还有2个和$watch相关的函数：

$watchGroup(watchExpressions,listener);

$watchCollection(obj,listener);

AngularJS $监视元素宽度的变化

.directive('stayPut',function () {
    var linker = function (scope,element,attrs) {

        scope.getElemWidth = function () {
            return element.width();
        };

        scope.$watch(scope.getElemWidth,function (newWidth,oldWidth) {
                var deltaWidth = newWidth - oldWidth;

                console.log(deltaWidth);

                element.css('top',(parseInt(element.css('top')) + 
                    deltaWidth)                   +
                    'px');
        },true);

        element.bind('resize',function () {
            scope.$apply();
        });
    };

    return {
        link: linker,restrict: 'A'
    }
});

element.bind('resize',function () {
    scope.$apply();
});

element.on('resize',function () {
    scope.$apply();
});

angularjs -- 监听angularJs列表数据是否渲染完毕

　　前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作，这几天就一直遇到在列表和表格渲染完毕后，执行点击和选择操作。对于angularjs处理这类问题，最好的方式就是指令 directive。

　　首先，定义指令：

app.directive(''onfinishrenderfilters'', function ($timeout) {
    return {
        restrict: ''A'',
        link: function (scope, element, attr) {
            if (scope.$last === true) {    //判断是否是最后一条数据
                $timeout(function () {
                    scope.$emit(''ngRepeatFinished''); //向父级scope传送ngRepeatFinished命令
                });
            }
        }
    };
});

　　其次，指令定义完毕后，需要将指令添加到迭代的标签内，此处是<tr>标签

<div class="fixed-table-container" style="margin-right: 0px;">
    <table class="table table-hover lamp-table">
        <thead>
        <tr>
            <th></th>
            <th style="text-align: center; " data-field="name_device-id" tabindex="0"
                ng-repeat="i in provider.geoZoneListHead track by $index" ng-hide=i.bol>
                <div class="th-inner sortable " style="padding-right: 10px">{{i.name}}
                </div>
                <div class="fht-cell" style="width: 101px;"></div>
            </th>

        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="i in provider.geoZoneList" onfinishrenderfilters>
            <td><input data-index="0" name="btSelectItem" type="radio"
                       value="{{$index}}" ng-click="selectInput($index)"></td>
            <td class="nameId0">{{$index+1}}</td>
            <td class="nameId1">{{i.geoZoneName}}</td>
            <td class="nameId2">{{i.description}}</td>
            <td class="nameId3">{{i.totalNumberOfMembers}}</td>
            <td class="nameId4">{{i.country}}</td>
            <td class="nameId5">{{i.lastUpdateDate}}</td>
        </tr>
        </tbody>
    </table>
</div>

　　最后，在最后一条数据渲染完毕后，$emit用来向父级Scope传送事件(命令)，$brodercast是向子级scope传送事件(命令)。而$scope.$on()是监听事件，监听$emit或者$brodercast是否将事件(命令)传送回来，若事件已传送回来，则表示数据已经渲染完毕，就可以执行以后的其他操作了。  

$scope.$on(''ngRepeatFinished'', function (ngRepeatFinishedEvent) {
    var btnList = $("input[name=''btSelectItem'']");
    btnList.eq(0).attr("checked","checked");
    $scope.provider.detalOutlet();
});

　　在没有angularJs的时候一般通过监听onLoad事件来确定页面是否加载完成。但在使用angularJs来渲染页面时，onLoad事件不能保证angularJs是否完成了对页面的渲染。最常见的情况就是用angularJs来加载某个数据Table时，我们得等这个Table加载完之后对Table上的数据进行操作，但因为这个Table是由AngularJs渲染的，所以得找到某个方法获得AngularJs渲染完毕后的事件。 这也就是为什么onload事件在angularJs框架上数据刷新不执行的一个原因，因为angularJs是数据驱动，根据数据的更新进行页面的刷新，而整体页面已经加载完成(数据更新，angularJs数据渲染，页面不会重新加载)，故onload事件判定页面没有变化，所以不予执行！

angularjs – Angular ui布局 – 当某些内容发生变化时如何刷新大小？

<ui-layout options="{ flow: 'column' }">
     <div ui-layout-container size="15%"> sidebar </div>
     <div ui-layout-container min-size="65%"> main </div>
     <div ui-layout-container ng-if="haveSelected()" size="20%"> props </div>
</ui-layout>

ui-layout(options="{ flow: 'column' }",ng-if="showThirdPanel")
  div(ui-layout-container)
    include ./firstPanel.jade
  div(ui-layout-container)
    include ./secondPanel.jade
  div(ui-layout-container)
    include ./thirdPanel.jade
ui-layout(options="{ flow: 'column' }",ng-if="!showThirdPanel")
  div(ui-layout-container)
    include ./firstPanel.jade
  div(ui-layout-container)
    include ./secondPanel.jade

今天的关于AngularJS实现一次监听多个值发生的变化和angular监听事件的分享已经结束，谢谢您的关注，如果想了解更多关于angularjs $watch监听模型变化、AngularJS $监视元素宽度的变化、angularjs -- 监听angularJs列表数据是否渲染完毕、angularjs – Angular ui布局 – 当某些内容发生变化时如何刷新大小？的相关知识，请在本站进行查询。