Шаблон HTML в AngularJS, например KnockoutJS

Шаблоны HTML можно использовать несколько раз с предоставленными данными в качестве объекта в KnockoutJS, у меня возникают трудности с поиском той же функции с AngularJS. Взгляните на приведенный ниже URL-адрес документации KO.

http://knockoutjs.com/documentation/template-binding.html

<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<div data-bind="template: { name: 'person-template', data: seller }"></div>

<script type="text/html" id="person-template">
    <h3 data-bind="text: name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>
</script>

<script type="text/javascript">
     function MyViewModel() {
         this.buyer = { name: 'Franklin', credits: 250 };
         this.seller = { name: 'Mario', credits: 5800 };
     }
     ko.applyBindings(new MyViewModel());
</script>

Вы можете наблюдать, как «покупатель» и «продавец» передаются как объект в шаблон и соответственно отображаются с помощью Knockout JS.

Я хочу аналогичную реализацию с AngularJS. Взгляните на приведенный ниже пример.

<script type="text/ng-template" id="someId">{{name}}</script>

<ng-include src="'someId'" onload="name='FirstValue'" ></ng-include>
<ng-include src="'someId'" onload="name='SecondValue'" ></ng-include>

Я пробовал что-то вроде выше, но, наконец, оба ng-include будут генерировать текст «test1». Мне нужен другой результат как для ng-include, так и для первого «FirstValue» и для второго «SecondValue».

Посмотрите здесь: http://plnkr.co/edit/DQgPZ9GKKLnwSvOggY3M?p=preview

Как я могу передать объект данных в такой HTML-шаблон и отобразить его соответствующим образом?


angularjs angular-template knockout.js
person Kaushal O    schedule 20.06.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Если вы хотите повторно использовать шаблоны, вы можете создать directives, который содержит область действия.

Шаблон

<script type="text/ng-template" id="someId.html"><span>{{name}}</span></script>

Директива

myApp.directive("myTemplate", function () {
    return {
        restrict: "E",
        scope: {
            name: "="
        },
        replace: true,
        templateUrl: "someId.html"
    };
});

Использование

<my-template name="name"></my-template>

Пример

person Mark Coleman    schedule 20.06.2013
comment
Я попробовал способ, который вы предложили в приведенном ниже плункере, пожалуйста, проверьте и дайте мне знать, если я делаю что-то не так, это не работает, поскольку я следовал тому, как вы предложили здесь. plnkr.co/edit/DQgPZ9GKKLnwSvOggY3M?p=preview - person Kaushal O; 21.06.2013
comment
templateUrl должен соответствовать идентификатору шаблона, а также шаблон должен иметь один корневой элемент, поэтому, если вы оберните имя в <span>{{name}}</span>, все будет работать правильно, см. Пример - person Mark Coleman; 21.06.2013