AngularJS comment ajouter dynamiquement du HTML et lier au contrôleur

il y a une autre façon aussi

1. étape 1: créer un échantillon.fichier html
2. étape 2: Créer une balise div avec un certain id = loadhtml Eg: <div id="loadhtml"></div>

3. étape 3: dans toute Contrôleur

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

ceci chargera une page html dans la page courante

pour ceux, comme moi, qui n'avaient pas la possibilité d'utiliser la directive angulaire et étaient "coincés" en dehors de la portée angulaire, voici quelque chose qui pourrait vous aider.

après des heures de recherche sur le web et sur le doc angulaire, j'ai créé une classe qui compile HTML, le place à l'intérieur d'une cible, et le lie à une portée ( $rootScope s'il n'y a pas de $scope pour cet élément)

/**
 * AngularHelper : Contains methods that help using angular without being in the scope of an angular controller or directive
 */
var AngularHelper = (function () {
    var AngularHelper = function () { };

    /**
     * ApplicationName : Default application name for the helper
     */
    var defaultApplicationName = "myApplicationName";

    /**
     * Compile : Compile html with the rootScope of an application
     *  and replace the content of a target element with the compiled html
     * @$targetDom : The dom in which the compiled html should be placed
     * @htmlToCompile : The html to compile using angular
     * @applicationName : (Optionnal) The name of the application (use the default one if empty)
     */
    AngularHelper.Compile = function ($targetDom, htmlToCompile, applicationName) {
        var $injector = angular.injector(["ng", applicationName || defaultApplicationName]);

        $injector.invoke(["$compile", "$rootScope", function ($compile, $rootScope) {
            //Get the scope of the target, use the rootScope if it does not exists
            var $scope = $targetDom.html(htmlToCompile).scope();
            $compile($targetDom)($scope || $rootScope);
            $rootScope.$digest();
        }]);
    }

    return AngularHelper;
})();

il couvrait tous mes cas, mais si vous trouvez quelque chose que je devrais ajouter, n'hésitez pas à commenter ou modifier.

j'Espère que ça aidera.

voir si cet exemple apporte des précisions. Fondamentalement, vous configurez un ensemble de routes et incluez des gabarits partiels basés sur la route. Définir ng-view dans votre index principal.html vous permet d'injecter ces vues partielles.

la partie de configuration ressemble à ceci:

  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {controller:'ListCtrl', templateUrl:'list.html'})
      .otherwise({redirectTo:'/'});
  }])

le point d'entrée pour l'injection de la vue partielle dans votre modèle principal est:

<div class="container" ng-view=""></div>

j'avais besoin d'exécuter une directive après avoir chargé plusieurs gabarits et j'ai donc créé cette directive:

utilModule.directive('utPreload',
    ['$templateRequest', '$templateCache', '$q', '$compile', '$rootScope',
    function($templateRequest, $templateCache, $q, $compile, $rootScope) {
    'use strict';
    var link = function(scope, element) {
        scope.$watch('done', function(done) {
            if(done === true) {
                var html = "";
                if(scope.slvAppend === true) {
                    scope.urls.forEach(function(url) {
                        html += $templateCache.get(url);
                    });
                }
                html += scope.slvHtml;
                element.append($compile(html)($rootScope));
            }
        });
    };

    var controller = function($scope) {
        $scope.done = false;
        $scope.html = "";
        $scope.urls = $scope.slvTemplate.split(',');
        var promises = [];
        $scope.urls.forEach(function(url) {
            promises.add($templateRequest(url));
        });
        $q.all(promises).then(
            function() { // SUCCESS
                $scope.done = true;
            }, function() { // FAIL
                throw new Error('preload failed.');
            }
        );
    };

    return {
        restrict: 'A',
        scope: {
            utTemplate: '=', // the templates to load (comma separated)
            utAppend: '=', // boolean: append templates to DOM after load?
            utHtml: '=' // the html to append and compile after templates have been loaded
        },
        link: link,
        controller: controller
    };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<div class="container-fluid"
     ut-preload
     ut-append="true"
     ut-template="'html/one.html,html/two.html'"
     ut-html="'<my-directive></my-directive>'">
 
</div>