angular 动态加载 ng-model 监听值

　　此问题出现于 ng-repeat 出来的单日期控件问题上，用的是插件，然后通过 angular 指令封装了一下，ng-model 绑定值监听并设置选中并回填。其实主要是多个控件一起使用会导致  ng-model 始终监听的都是页面绑死的那个定值，导致了各个控件的选中和回填出现混乱的 bug。

　　首先看到问题时就发现了多个调用监听一个定值的问题，那么问题找到了，解决就有针对性了：只要将监听的值改成不同的值就行了，那怎么进行将 ng-model 值区分开呢？百度了好久其实都没查到有用的东西，查的类似：ng-model 绑定动态值。。。

　　后来偶尔发现有一篇文章提到了 $compile ，这个服务可以注入，主要应用为：动态加载 html 内容。眼睛一亮，这不就是我想要的实现嘛！果断查了一下 $compile，不出所料，此服务可以使用这种方式来进行动态DOM生成：

$scope.ngModel = 'date' + new Date().getTime();
var ele = $compile("<input id='input1' ng-model=" + $scope.ngModel + ">")($scope);

　　然后再进行向页面的添加：

$element.append(ele);

　　这样就可以底层动态绑定不一样的 ng-mdoel 监听值了！

　　不过仅这样也还不够，我们最终需要动态生成元素后要插到相应的html页面位置，那又该如何呢？查到对应对应元素后再添加，，比如我们要向一个id为 d1 的 div 添加该元素，那么可以先找到所有div：

var arr = $element.find('div');

　　然后移除无用 div ，直至最后一个，再进行添加操作：

for(var i = arr.length - 1; i >= 0; i--) {
    if(arr[i].id != 'd1') {
        arr.splice(i, 1);
    }
}
arr.append(ele);

　　至此解决 bug 问题，待续~

转载于:https://www.cnblogs.com/guofan/p/7760488.html