重新编译外部脚本修改的块

Question

我必须使用修改我的 DOM 的框架。以下是一些使用的 HTML 示例：

<div id="testID" ng-show="example === 'show'">Some Content</div>

会被框架修改成这样的：

<div id="wrapperOne">
    <div id="wrapperTwo">
        <div id="testID" ng-show="example === 'show'">Some Content</div>
    </div>
</div>

这可以通过调用像这样的 JS 函数来完成：

framework.wrap($("#testID"));

如您所见，该框架将旧的 HTML 与一些其他元素包装在一起。 我的问题是，当 $scope.example 变为“显示”时，Angular 不显示 div。在不使用框架的情况下，它可以正常工作，我认为问题在于，在框架更改 DOM 之前，Angular 会编译 DOM。框架必须等待一个 ajax 请求，所以仅仅在它之后包含 angular 脚本是行不通的。

我正在寻找一种解决方案来强制 Angular “重新编译”整个 DOM，最好是其中的某些部分。 这是正确的建议，还是有其他方法可以做到这一点？仅仅省略框架不是解决方案，因为我必须使用它。

非常感谢，

-卢卡斯

Answer 1

使用自定义 directive 和 ng-transclude

我创建了一个小提琴 - http://jsfiddle.net/zghuoxhb/2/

指令：

.directive('myWrapper', function () {
    return {
        restrict: 'E',
        templateUrl: "my-wrapper-template.html",
        replace: true,
        transclude: true,
        scope: false
    };
})

html：

<my-wrapper>
    <div id="testID" ng-show="example === 'show'">Some Content</div>
</my-wrapper>

输出：

顺便说一句，很好的问题，这是一个很好的用例来展示 Angular 的精彩