верните шаблон, когда пользователь нажимает на событие в Angular

Question

Я пытаюсь получить синтаксис для углового (только что начатый вчера) и лучший способ добиться следующего. То, что я хотел бы сделать, это загрузить некоторый скомпилированный html и вставить его в DOM. Это продолжение этого вопроса: first time writing an Angular directives and returning a compiled template. Вместо того, чтобы позвонить

<div my-customer></div> 

Я хочу загрузить шаблон динамически на основе взаимодействия с пользователем. Скажите что-нибудь вроде:

<div ng-click="loadMyCustomer()">load customer</div><!-- should load here --> 
.... 

arcModule.controller('MainCtrl', function($scope, $http){ 
    $scope.sayHello(){ 
    alert("hello here"); 
    } 

    $scope.loadMyCustomer=function(){ 
    //alert("hello"); 
    // return the template in the mycustomer directive and place it after the current DOM element from which it is called 
    } 
    $scope.customer = { 
    name: 'Naomi', 
    address: '1600 Amphitheatre' 
    }; 
}); 

arcModule.directive('myCustomer', function() { 
    return { 
    template: 'Name: {{customer.name}}<button ng-click="sayHello()">Click to say hello.</button> Address: {{customer.address}}' 
    }; 
}); 

Извините, если это звучит просто, но я нахожу угловые документы немного непрозрачные и, если я могу понять, как вернуть это, я буду очень рад. Итак, как я могу вернуть шаблон в директиве с помощью метода loadMyCustomer?

Answer 1

Для чего вы выделили это можно сделать, не создавая новую директиву и используя действующую директиву ng-include.

Даже если вы должны сделать это таким образом

<div ng-click="showCustomer=true">... 
<div my-customer ng-if="showCustomer"></div> 

Преимущество ngif является то, что шаблон не будет загружен, пока showCustomer верно.