Question

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

我的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。

Answer 1

Angular并不知道你在jQuery中的变化。您需要通过angular加载html并调用编译服务：

$compile(HTML)($scope);

或者发出事件并告诉angular编译它。我刚刚回答了一个与此类似的问题，关于如何通过jquery进行角度感知：AngularJS legacy integration and content that contains asynchronously changing id doesn't trigger watcher

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

即

<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));
                });
            };
         }
     };
 });

Answer 2

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

Angular.Js Bind动态加载HTML

2 个答案: