أعد تحميل DOM بعد استعلام AJAX عن AngularJS

StackOverflow https://stackoverflow.com//questions/24009837

سؤال

في مشروعي، أقوم بطلب AJAX باستخدام AngularJS الذي يتصل بصفحة أخرى تتضمن توجيهات Angular (أريد إجراء مكالمة AJAX أخرى بالداخل) ولكن لا يوجد تفاعل في الصفحة المحملة.

أعتقد أن DOM الجديد لا يعمل ..أحاول استخدام الرمز الزائف $apply دون جدوى.

الرئيسية.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>

وشبيبتي:

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() {
                    });
        };
    }
]);

شكرا لك على مساعدتك

هل كانت مفيدة؟

المحلول 2

I resolve my problem with this response.

My new 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() {
                    });
        };
    }
]);

And new 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>

And FirstAjax.html :

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

BindHtmlUnsafe the directive re-compile the new DOM to Angular knows the DOM loaded AJAX

نصائح أخرى

من وجهة نظري هل يمكن أن تكون المشكلة بسبب $scope؟

وحدة التحكم الثانية لديك لا يمكنها الوصول إلى نفس متغير البيانات.

حاول تغيير الكود لاستخدام $rootScope في كلا وحدتي التحكم بدلاً من $scope، ومعرفة ما إذا كان ذلك سيؤدي إلى حل المشكلة.

أو

على الخاص بك FirstAjax.html أدخل هذا:

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

من المفترض أن يؤدي ذلك إلى إنشاء متغير بيانات ثانٍ داخل نطاق وحدة التحكم 2، حتى يتمكن من وضع المحتوى.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top