Angular之$compile函数的使用

  • Angular之$compile函数的使用

    在用Angular写一些比较复杂的功能的时候，难免会遇到这样的需求：需要懂动态的往页面中插入一些元素，而且这些元素还需要跟scope中的的某些值绑定。

    比如要将一个div动态的插入到body中,如下:

    scope.attr = "hello";
$("body").append('<div ng-bind="attr"></div>');

    但是如果只是上面这么写的话，不管你scope.attr怎么变化, div的html都不会有变化。那么怎么才能让它们绑定到一起的呢？这就要用到$compile函数了。

  • $compile函数的作用
    $compile函数可以将一段html字符串或者DOM元素跟scope编译绑定到一起。

  • $compile函数如何使用

    $compile(element)(scope);
//element可以是一段html字符串，也可以是DOM元素；return值为编译完后的DOM元素

  • 用$compile完成上面的需求

    scope.attr = "hello";
var html = $compile('<div ng-bind="attr"></div>')(scope);
$("body").append(html);
scope.$digest();//遍历scope
Angular