Angular JS – Carica un template html dalla direttiva al clic di un pulsante

Sto cercando di caricare un modello HTML quando si fa clic su un collegamento. Ho creato una direttiva che contiene templateUrl che carica un file HTML. Sto chiamando una funzione quando viene cliccato un link che aggiunge un div con la nostra direttiva personalizzata “myCustomer” a un div già in index.html. qualunque cosa abbia fatto finora è mostrata sotto, ma non funziona.

index.html

      Example - example-example12-production        

script.js

 (function(angular) { 'use strict'; angular.module('docsTemplateUrlDirective', []) .controller('Controller', ['$scope', function($scope) { $scope.showdiv = function(){ $("#d").append("
"); }; }]) .directive('myCustomer', function() { return { templateUrl: 'my-customer.html' }; }); })(window.angular);

my-customer.html

 

DIV CONTENT

Ecco il link che stavo testando questo codice qui

Questo perché l’angular non vincola le direttive se si aggiunge un contenuto come questo,

è necessario $compile servizio $compile per fare questo e questo vincolerà le direttive contro il tuo $scope

così controller come,

 .controller('Controller', ['$scope', '$compile', function($scope, $compile) { $scope.showdiv = function(){ var compiledeHTML = $compile("
")($scope); $("#d").append(compiledeHTML); }; }])

ecco la DEMO


O bravo a fare così,

usa ng-if per creare o rimuovere elementi da html,

prova questo codice

Controller ,

 .... $scope.anableCustomerDirective = false; $scope.showdiv = function(){ $scope.anableCustomerDirective = true; }; 

HTML

    

Suggerimento

se la tua intenzione principale è quella di inserire un contenuto html dopo il clic, puoi usare ng-include qui e sarà molto più pulito e senza bisogno di un’altra direttiva.

 
$scope.showdiv = function(){ $scope.templateURL = 'my-customer.html'; };

trova la DEMO

Sembra che la direttiva abbia il solo scopo di caricare template da esso. Suggerirei di usare quindi la direttiva ng-include

markup

 show 

quando lo fai manualmente con append, in realtà non esegui $ apply o $ digest in modo che la direttiva non venga eseguita, puoi provare a farlo con ng-show o ng-if … ad es.

     

in questo modo angular esegue $ apply e la direttiva verrà renderizzata.

Il modo più comune è usare $compile . Ulteriori informazioni: aggiungere dynamicmente la direttiva in AngularJS

Quindi il tuo controller potrebbe assomigliare a questo:

 angular.module('docsTemplateUrlDirective', []) .controller('Controller', ['$scope', '$compile', function($scope, $compile) { $scope.showdiv = function(){ var el = $compile( "
" )( $scope ); $('#d').append( el ); }; }]);

Si noti che la invocazione della direttiva dovrebbe apparire come segue:

, non

come nel codice.