Question

在主页面上有初始化ng-app和ng-controller：

<body ng-app="app">
<div ng-controller="MyController">
  <!-- Here is loaded HTML from AJAX response -->
</div>
</body>

Ajax响应看起来像：

<div>{{var}}</div>

所以，这个{{var}}显示像文本一样，我认为因为这个HTML没有与所有DOM页面一起加载。怎么解决？

Answer 1

解决方案：

.directive('bindUnsafeHtml', ['$compile', function ($compile) {
        return function(scope, element, attrs) {
            scope.$watch(
                function(scope) {
                    // watch the 'bindUnsafeHtml' expression for changes
                    return scope.$eval(attrs.bindUnsafeHtml);
                },
                function(value) {
                    // when the 'bindUnsafeHtml' expression changes
                    // assign it into the current DOM
                    element.html(value);

                    // compile the new DOM and link it to the current
                    // scope.
                    // NOTE: we only compile .childNodes so that
                    // we don't get into infinite loop compiling ourselves
                    $compile(element.contents())(scope);
                }
            );
        };
    }])

模板：

<div bind-unsafe-html="templateForm"></div>

Ajax响应：

request.success(function (data) {
  $scope.templateForm = data.html;
});

Answer 2

遗憾的是，你想要实现的目标根本不容易。

在这种情况下，你处于AngularJS和Jquery的边界。

你可以像在这个答案中解释的那样做： https://stackoverflow.com/a/18157958/669561

但我建议你改变策略并直接使用AngularJS $http - 服务来执行Ajax-Request。

您还可以使用ng-include-Directive

动态地使用AngularJS包含HTML

<body ng-app="app">
<div ng-controller="MyController">
    <ng-include src="your url with HTML content">
</div>
</body>

如何在Ajax响应中使用init控制器？

2 个答案: