AngularJS Как динамически добавлять HTML и привязывать к контроллеру

Ответ 1

Я бы использовал встроенную директиву ngInclude. В приведенном ниже примере вам даже не нужно писать javascript. Шаблоны могут так же легко жить на удаленном URL-адресе.

Вот рабочая демонстрация: http://plnkr.co/edit/5ImqWj65YllaCYD5kX5E?p=preview

<p>Select page content template via dropdown</p>
<select ng-model="template">
    <option value="page1">Page 1</option>
    <option value="page2">Page 2</option>
</select>

<p>Set page content template via button click</p>
<button ng-click="template='page2'">Show Page 2 Content</button>

<ng-include src="template"></ng-include>

<script type="text/ng-template" id="page1">
    <h1 style="color: blue;">This is the page 1 content</h1>
</script>

<script type="text/ng-template" id="page2">
    <h1 style="color:green;">This is the page 2 content</h1>
</script>

Ответ 2

Есть и другой способ:

• шаг 1: создать файл sample.html
• Шаг 2: создайте тег div с некоторым id = loadhtml. Например: <div id="loadhtml"></div>

• Шаг 3: в любом Контроллер

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

Загрузка страницы html на текущей странице

Ответ 3

Для тех, кто, как и я, у которых не было возможности использовать директиву angular и были "застряли" вне области angular, вот что вам может помочь.

После просмотра часов в Интернете и в документе angular я создал класс, который компилирует HTML, помещает его в целевые объекты и связывает его с областью ($rootScope, если нет $scope для этот элемент)

/**
 * 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;
})();

Он охватывал все мои дела, но если вы найдете что-то, что я должен добавить к нему, не стесняйтесь комментировать или редактировать.

Надеюсь, это поможет.

Ответ 4

Мне нужно было выполнить директиву ПОСЛЕ загрузки нескольких шаблонов, поэтому я создал эту директиву:

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>

Ответ 5

Смотрите, если этот пример предоставляет любые пояснения. В основном вы настраиваете набор маршрутов и включаете частичные шаблоны на основе маршрута. Установка ng-view в вашем основном index.html позволяет вводить эти частичные представления.

Конфигурационная часть выглядит следующим образом:

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

Пункт ввода для ввода частичного представления в ваш основной шаблон:

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