Angular.Js 绑定动态加载的 HTML答案

【问题标题】：Angular.Js Bind Dynamically loaded HTMLAngular.Js 绑定动态加载的 HTML
【发布时间】：2015-05-29 23:10:17
【问题描述】：

我正在使用 HTML 页面的内容更新一个 DIV，该页面具有角度控制器。当用 HTML 填充 DIV 时，它不会与控制器绑定。

我的 index.html

<div id="mainDiv"> </div>

我用 jQuery 加载的 home.html 的内容

<div ng-controller="BlogsController">
    {{Hello}}
</div>

这就是我在 index.html 上调用的内容

$().ready(function () {
    $("#mainDiv").load("pages/home.html");
})

Angular 没有更新 {{Hello}}，它似乎没有绑定到通过 jQuery 加载的 html。

【问题讨论】：

标签： jquery angularjs

【解决方案1】：

Angular 不知道您在 jQuery 中所做的更改。您需要通过 Angular 加载 html 并调用编译服务：

$compile(HTML)($scope);

或者发出事件并告诉 Angular 编译它。前几天我刚刚回答了一个类似的问题，关于如何让 Angular 了解通过 jquery 所做的更改：AngularJS legacy integration and content that contains asynchronously changing id doesn't trigger watcher

要清理，您需要将 ngSanitize 模块添加到您的项目中。但我相信你可以使用 $sce 服务告诉 Angular，如果你信任它就不要打扰它

即

<div id="mainDiv" compile-directive></div>

$().ready(function () {
    $.get('pages/home.html', function(data){
        $(document).trigger('customEvent', [data]);  
    });
});

angular.module('test').run(['$rootScope', function ($rootScope) {
    //capture jQuery events and re-broadcast them as angular events
    //events to capture
    var events = [
        'customEvent'
    ];

    //To Use: $scope.$on('eventName', function(ngEvent, jqEvent, data)
    $(document).on(events.join(' '), function(e) {
        $rootScope.$broadcast.apply($rootScope, [e.type].concat(Array.prototype.slice.call(arguments, 0)));   
    });
});

angular.module('test').directive('compileDirective', function($compile, $sce){
    return{
        restrict: 'AE',
        link: function(scope, element, attrs){
            scope.$on('customEvent', function(ngEvent, jqEvent, data){
                scope.$apply(function(){
                    angular.element.append($compile($sce.trustAsHtml(data))(scope));
                });
            };
         }
     };
 });

【讨论】：

我在 Angular JS 之外的自定义 JS 文件中执行此操作。有可能吗？
更新的答案，应该让您很好地了解如何将数据从 jQuery 传输到 angular 并在 angular 内编译
我得到参数 'fn' 不是函数，得到字符串
哪一行给你这个错误？我将 ajax 调用更新为文档建议获取 html api.jquery.com/jquery.get
我让它工作了，但是它在页面上返回 RAW HTML，你能调整上面的代码以允许不安全的 HTML 渲染吗？

【解决方案2】：

  var htmlcontent = $('#loadhtml ');
    htmlcontent.load('/Pages/Common/index.html')
    $compile(htmlcontent.contents())($scope);

【讨论】：

我得到 Uncaught ReferenceError: $compile is not defined
在你的控制器中添加依赖注入器