Корректная загрузка текста / ng-шаблона в директивах AngularJS

Question

Корректная загрузка текста / ng-шаблона в директивах AngularJS

0

У меня есть директива о том, что я хочу очистить содержимое DIV и заменить его шаблоном либо в моем текущем представлении, либо в другом месте в моем приложении.

Так сказать, у меня есть мой шаблон, как...

<!-- This is an experiment -->
<script type="text/ng-template" id="1.html">
     <div data-ng-repeat="beatle in beatles track by $index">
      Name: {{beatle.name}}, Instrument: {{ beatle.inst}}, Alive: {{ beatle.alive }}
    </div>
</script>

и в моей директиве у меня есть следующее:

link: function (scope, element) {
                element.bind('click', function () {

                    // clear out old template
                    angular.element(element).empty();
                    angular.element(element).html(document.getElementById('1.html'));

                });
            }

Я, кажется, могу загрузить шаблон, но я вижу следующее вместо моего контента

[object HTMLScriptElement]

Я задаюсь вопросом, нужно ли мне снова скомпилировать или запустить дайджест, или если я просто сделаю это совершенно неправильно. Мне также не нравится использовать document.getElementById в моем директивном коде, по какой-то причине он чувствует себя не так. Может ли кто-нибудь дать мне ответ на вопрос, почему я вижу только [object HTMLScriptElement] после нажатия на мою директиву и, если использовать document.getElementById в моей директиве, или если есть более эффективная команда для загрузки содержимого...

Вот скрипка всего приложения... или мусор! https://jsbin.com/yizupa/edit?html,output

Mike Sav 21 июль 2015, в 16:31

Источник

0

Вы хотите, чтобы замена происходила только при нажатии? Обычно вы бы указали такую директиву: jsbin.com/qudategoda/1/edit?html,output
paul 21 июль 2015, в 14:30
0

Привет, в значительной степени да, я больше обеспокоен загрузкой шаблона в div, чем что-либо еще. Моя оригинальная директива будет охватывать большие области интерфейса, я не могу использовать директиву template или templateUrl в моей текущей реализации. Я просто хочу загрузить новый контент в контейнер ...
Mike Sav 21 июль 2015, в 14:33

Теги:

javascript

angularjs

angularjs-directive

2 ответа

Ещё вопросы

Вы хотите, чтобы замена происходила только при нажатии? Обычно вы бы указали такую директиву: jsbin.com/qudategoda/1/edit?html,output
Привет, в значительной степени да, я больше обеспокоен загрузкой шаблона в div, чем что-либо еще. Моя оригинальная директива будет охватывать большие области интерфейса, я не могу использовать директиву template или templateUrl в моей текущей реализации. Я просто хочу загрузить новый контент в контейнер ...

Lomesh Patel · Answer 1 · 2015-12-07T06-52-00.000Z

here, i have create one running demo.. for route using **text/ng-template**..

index.html
-------------

<!DOCTYPE html>
<html lang="en" ng-app="singlePageApp">
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>

<head>
    <meta charset="UTF-8">
    <title>AngularJS Routing Template..</title>
</head>
<body>
<div ng-controller="singlePageAppController">
{{message}}
</div>
    <ul>
        <li><a href="#/home">Home</a></li>
        <li><a href="#/about">About</a></li>
    </ul>
<div ng-view="showOutput"></div>
</body>

    <script type="text/ng-template" id="home.html">
           This is HOME Page..
    </script>

    <script type="text/ng-template" id="about.html">
           This is ABOUT Page..
    </script>


</html>

--------
app.js
--------

var app=angular.module('singlePageApp',['ngRoute']);

app.config(function($routeProvider){

    $routeProvider
        .when('/home',{
            controller:'singlePageAppController',
            templateUrl: 'home.html'
        })
        .when('/about',{
            templateUrl: 'about.html'
        });

});

app.controller('singlePageAppController',function($scope){

    $scope.message="Hello Single Page Application..";

});

Mike Sav · Answer 2 · 2015-07-22T07-20-00.000Z

Тем временем я только пришел к выводу, что моя установка/реализация неверна и что я должен рассмотреть другой способ реализации такой функции.