AJAX 查询 AngularJS 后重新加载 DOM答案

【问题标题】：Reload DOM after AJAX queries AngularJSAJAX 查询 AngularJS 后重新加载 DOM
【发布时间】：2014-07-23 11:22:57
【问题描述】：

在我的项目中，我使用 AngularJS 执行 AJAX 请求，该请求调用包含 Angular 指令的另一个页面（我想在内部进行另一个 AJAX 调用）但在加载的页面中没有交互。

我认为新的 DOM 不起作用。我正在尝试伪代码 $apply 失败。

Main.html：

<!DOCTYPE html>
<html data-ng-app="App">
    <head></head>
    <body >
        <div data-ng-controller="editeurMenuMobile">
            <ul>
                <li data-ng-click="callMenu('FirstAjax.html')" > <!-- Work ! -->
                    <a href="">
                        <span>Modèles</span>
                    </a>
                </li>
                <li data-ng-click="callMenu('FirstAjax.html')"> <!-- Work ! -->
                    <a href="">
                        <span>Designs</span>
                    </a>
                </li>
            </ul>
            <div data-ng-bind-html="data">
                <!-- AJAX content -->
            </div>
        </div>

        <!-- Javascript scripts -->
    </body>
</html>

FirstAjax.html：

<div data-ng-controller="editeurActionAjax">
    <div>
        <button data-ng-click="callAction('SecondAjax.html')"> <!-- Doesn't work -->
            Go
        </button>
    </div>
</div>

还有我的 JS：

var App = angular.module('App', []);

App.controller('editeurMenuAjax', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
        $scope.callMenu = function(element) {
            $http({method: 'GET', url: element}).
                    success(function(data) {
                        $scope.data = $sce.trustAsHtml(data);
                    }).
                    error(function() {
                        $scope.showAjaxError = true;
                    });
        };
    }
]);
App.controller('editeurActionAjax', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
        $scope.callAction = function(element) {
            $http({method: 'GET', url: element}).
                    success(function(data) {
                        $scope.data = $sce.trustAsHtml(data);
                    }).
                    error(function() {
                    });
        };
    }
]);

感谢您的帮助

【问题讨论】：

为什么不使用服务器端脚本来调用页面？
你为什么不用ngView呢？
Angularjs ng-bind-html-unsafe replacement 的可能重复项

标签： javascript angularjs angularjs-scope

【解决方案1】：

在我看来，问题可能是因为 $scope 造成的吗？

您的第二个控制器无权访问相同的数据变量。

尝试更改代码以在两个控制器中使用 $rootScope 而不是 $scope，看看它是否解决了问题。

或者

在您的 FirstAjax.html 上插入：

<div data-ng-bind-html="data">
    <!-- AJAX content -->
</div>

这应该在控制器 2 的范围内创建第二个数据变量，以便它可以放置内容。

【讨论】：

【解决方案2】：

我用this response解决了我的问题。

我的新 JS：

App.directive('bindHtmlUnsafe', function( $compile ) {
    return function( $scope, $element, $attrs ) {

        var compile = function( newHTML ) { // Create re-useable compile function
            newHTML = $compile(newHTML)($scope); // Compile html
            $element.html('').append(newHTML); // Clear and append it
        };

        var htmlName = $attrs.bindHtmlUnsafe; // Get the name of the variable 
                                              // Where the HTML is stored

        $scope.$watch(htmlName, function( newHTML ) { // Watch for changes to 
                                                      // the HTML
            if(!newHTML) return;
            compile(newHTML);   // Compile it
        });

    };
});

var App = angular.module('App', []);

App.controller('editeurMenuAjax', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
        $scope.callMenu = function(element) {
            $http({method: 'GET', url: element}).
                    success(function(data) {
                        $scope.data = $sce.trustAsHtml(data);
                    }).
                    error(function() {
                        $scope.showAjaxError = true;
                    });
        };
    }
]);
App.controller('editeurActionAjax', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
        $scope.callAction = function(element) {
            $http({method: 'GET', url: element}).
                    success(function(data) {
                        $scope.data = $sce.trustAsHtml(data);
                    }).
                    error(function() {
                    });
        };
    }
]);

还有新的 Main.html ：

<!DOCTYPE html>
<html data-ng-app="App">
    <head></head>
    <body >
        <div data-ng-controller="editeurMenuMobile">
            <ul>
                <li data-ng-click="callMenu('FirstAjax.html')" > <!-- Work ! -->
                    <a href="">
                        <span>Modèles</span>
                    </a>
                </li>
                <li data-ng-click="callMenu('FirstAjax.html')"> <!-- Work ! -->
                    <a href="">
                        <span>Designs</span>
                    </a>
                </li>
            </ul>
            <div data-bind-html-unsafe="data">
                <!-- AJAX content -->
            </div>
        </div>

        <!-- Javascript scripts -->
    </body>
</html>

还有 FirstAjax.html：

<div data-bind-html-unsafe='dataAction' >
    <div class="addRubrique">
        <button data-ng-click="callAction('SecondAjax.html')">
            Ajouter
        </button>
    </div>
</div>

BindHtmlUnsafe 指令重新编译新的 DOM 到 Angular 知道 DOM 加载的 AJAX

【讨论】：