AngularJS动态增加dom，导致里面ng-click、modal绑定失效的问题解决方法

1、首先解释一下这个现象的原因，AngularJS是页面刷新时编译静态的html，只会编译一次；所以在后来在div中新增动态新增html的时候，这块新增的代码块是没有被编译的，所以里面和angular相关的绑定都失效了；

2、既然了解了是什么原因之后，才有了解决的头绪，就是说在动态增加代码块之后需要对这块代码进行编译，并且AngularJS中也提供了手动编译的功能（具体看代码）；

3、编译的问题解决了，还需要考虑一个问题，那就是我不知道这块动态代码什么时候被添加，那么就需要监听这块代码，只要一有变化就执行一次编译，庆幸的是AngularJS同样提供了监听的功能；

分析完成后，现在看具体代码：

html：

js:

注意：

如果监听的是angualrjs的一个属性，那么directive中需要该一个地方：

link: function(scope, element, attrs) {
        scope.$watch(function() {
                    return scope.$eval(attrs.bindHtmlCompile);//监听angular对象,bindHtmlCompile是监听属性的驼峰写法
                },
                function(value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                });
    }

最后说一个我实际遇到的问题，我是刚开始使用angualrjs，之前一直使用的jquery，动态加载模态框的时候是走了一下后台查询了相关数据返回到一个模板上，再load到模态框的body中去；同样也是动态加载的问题：具体解决看代码：

    
    
    
    
    
    




    模态框 



    

        
        
创建/修改用例
    
    

    
    

        关闭
        保存
    

后台：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * Created by zelei.fan on 2017/5/19.
 */
@Controller
@RequestMapping("/test")
public class TestController {
    @RequestMapping("/modal")
    public String modal(){
        return "/test/testmodal";
    }

}