问题描述：ng-repeat绑定的数据集动态更新之后其包裹的子元素所绑定的事件全部丢失；
问题详述：
问题代码如下：

<style>
　　img{width:100px;height:100px;}
　　.foo{width:50px;height:50px;border:1px solid #ccc;}
</style><html>
　　<div ng-app="my" ng-controller="test">
   　　<button ng-click="change()">Change</button>
   　　<div ng-repeat="address in addresses">
   　　　　<div class="foo">{{address}}</div>
   　　</div>
   </div></html>
<script>
　　angular.module('my',[]).controller('test',function($scope){
   　　$scope.sites=[['A1','A2'],['B1','B2']];
   　　$scope.addresses=$scope.sites[0];
   　　$scope.change=function(){$scope.addresses=$scope.sites[1];};
   });
   $(function(){
   　　$(".foo").click(function(){alert(1)});
   });
</script>

页面加载完毕后给foo类元素绑定的事件都正常工作，点击Change按钮改变数据集addresses，原先给foo类元素绑定的点击事件全部丢失；
解决方案：
目前并没有找出治本的方法，一种比较low的折衷方案就是使用中间量，修改后的代码如下：

<style>
    img{width:100px;height:100px;}
    .foo{width:50px;height:50px;border:1px solid #ccc;}
</style>
<html>
    <div ng-app="my" ng-controller="test">
        <button ng-click="change()">Change</button>
        <div ng-repeat="i in nums">
            <div class="foo">{{addresses[i]}}</div>
        </div>
    </div>
</html>
<script>
    angular.module('my',[]).controller('test',function($scope){
        $scope.sites=[['A1','A2'],['B1','B2']];
        $scope.addresses=$scope.sites[0];
        $scope.change=function(){$scope.addresses=$scope.sites[1];};

        $scope.nums=[];
        for(var i=0;i<$scope.addresses.length;++i){$scope.nums.push(i);}
    });
    $(function(){
        $(".foo").click(function(){alert(1)});
    });
</script>

其实就是避免了ng-repeat中的数据集发生变化，如果有更好的解决方案请多多指教。

使用angular的ng-repeat遇到的一个问题的更多相关文章

  1. Angular: 执行ng lint后如何快速修改错误

    当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. ...

  2. Angular CLI 创建你的第一个 Angular 示例程序

    第一步:安装 Angular CLI 你要使用 Angular CLI 来创建项目.创建应用和库代码,并执行多种开发任务,比如测试.打包和发布. 全局安装 Angular CLI. 要想使用 npm  ...

  3. Angular CLI ng常用指令整理

    一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...

  4. Angular入门，开发环境搭建，使用Angular CLI创建你的第一个Angular项目

    前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...

  5. Angular实战之使用NG-ZORRO创建一个企业级中后台框架

    前言: 在之前的一篇文章已经介绍过了,公司正在使用NG-ZORRO组件库开发后台应用,并且详细的介绍了Angular开发环境的搭建和项目的创建.这篇文章就是为了让大家熟悉了解我们该如何在Angular ...

  6. Angular实战之使用NG-ZORRO创建一个企业级中后台框架（进阶篇）

    前言: 上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板.这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成 ...

  7. angular.js的ng-app 指令定义一个 AngularJS 应用程序。

    <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UT ...

  8. angular自定义指令 repeat 循环结束事件；limitTo限制循环长度、限定开始位置

    1.获取repeat循环结束: 自定义指令: .directive('repeatFinish', function () { return { link: function (scope, elem ...

  9. angular 的 @Input、@Output 的一个用法

    angular 使用 @input.@Output 来进行父子组件之间数据的传递. 如下: 父元素: <child-root parent_value="this is parent ...

  10. ANGULAR 使用 ng build --prod 编译报内存错误的解决办法

    如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...

随机推荐

  1. Can't find file: './mysql/plugin.frm' (errno: 13)[mysql数据目录迁移错位]错误解决

    大概需要4个步骤,其中第1步通过service mysql stop停止数据库,第4步通过service mysql start启动数据库. 第2步移动数据文件,不知道是否为Ubuntu智能的原因,移 ...

  2. Robotium自动化测试报告生成

    使用Robotium进行测试的时候,要想可以导出可视的测试结果,可以使用junitreport来实现junitreport下载地址:https://github.com/jsankey/android ...

  3. C# 检测机器是否有声卡设备

    有时候我们的程序需要进行音频的播放,则我们首先需要判断机器是否有声卡能够进行音频的播放.在网上找了一下没有发现太多关于如何检机器是否有声卡的例子.我在看了一些文档后自己写了一个小测试程序,如果机器装有 ...

  4. 【转】C/C++除法实现方式及负数取模详解

    原帖:http://blog.csdn.net/sonydvd123/article/details/8245057 一.下面的题目你能全做对吗? 1.7/4=? 2.7/(-4)=? 3.7%4=? ...

  5. 使用 cloc 统计代码行数

    可能大家都知道用 `wc -l` 命令进行代码行数统计,但是它会将代码中的注释.空行所占用的文本行都统计在内.如果想查看一个 tar 包或一个项目目录中“实际”的代码行数并且不愿意自己去写一个脚本来做 ...

  6. 【转】可执行程序包括BSS段、数据段、代码段

    可执行程序包括BSS段.数据段.代码段(也称文本段). 一.BSS BSS(Block Started by Symbol)通常是指用来存放程序中未初始化的全局变量和静态变量的一块内存区域.特点是:可 ...

  7. nyoj 289 苹果

    苹果 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 ctest有n个苹果,要将它放入容量为v的背包.给出第i个苹果的大小和价钱,求出能放入背包的苹果的总价钱最大值. ...

  8. opencv 图像轮廓

    图片解析: 原图: code: #include <opencv\cv.h> #include <opencv\highgui.h> #include <opencv\c ...

  9. 学习和理解C#的委托

    去年自学C#用的教程是入门级的<学通C#的24堂课>,教材里面也没有提到委托和事件,工作中也没怎么用到.后来一次在网上看了一些大牛的博客,读完之后感觉懵懵懂懂,似懂非懂,过了两三天之后,却 ...

  10. linux快速入门 1.1命令行操作

    http://lovesoo.org/linux-command-line-operation.html 1.1命令行操作 目录: <wp_nokeywordlink>Shell简介 &l ...