web-dev-qa-db-fra.com

Angular JS - Charger un modèle html à partir d'une directive en cliquant sur un bouton

J'essaie de charger un modèle HTML lorsqu'un lien est cliqué. J'ai créé une directive contenant templateUrl qui charge un fichier HTML. J'appelle une fonction lorsque l'on clique sur un lien qui ajoute un div avec notre directive personnalisée "myCustomer" à un div déjà dans index.html. tout ce que j'ai fait jusqu'à présent est indiqué ci-dessous, mais cela ne fonctionne pas.

index.html

    <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example12-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
  <div ng-controller="Controller">
  <a href="#" ng-click="showdiv()">show</a>
  <div id="d"></div>
</div>
</body>
</html>

script.js

(function(angular) {
  'use strict';
angular.module('docsTemplateUrlDirective', [])
  .controller('Controller', ['$scope', function($scope) {

    $scope.showdiv = function(){
      $("#d").append("<div my-Customer></div>");
    };
  }])
  .directive('myCustomer', function() {
    return {
      templateUrl: 'my-customer.html'
    };
  });
})(window.angular);

my-customer.html

<p>DIV CONTENT</p>

Voici le lien que je testais ce code ici

javascriptjqueryhtmlangularjsangularjs-directive
22
Vikram Singh Jadon

En effet, le angular ne lie pas les directives si vous ajoutez du contenu comme celui-ci,

tu dois $compile service pour ce faire et cela liera les directives à votre $scope

donc contrôleur comme,

.controller('Controller', ['$scope', '$compile', function($scope, $compile)     {

    $scope.showdiv = function(){
      var compiledeHTML = $compile("<div my-Customer></div>")($scope);
      $("#d").append(compiledeHTML);
    };

}])

voici la démo

[~ # ~] ou [~ # ~] bon à faire comme ça,

utilisation ng-if pour créer ou supprimer un élément en html,

essayez ce code

Contrôleur ,

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

[~ # ~] html [~ # ~] 

<body ng-app="docsTemplateUrlDirective">
  <div ng-controller="Controller">
      <a href="#" ng-click="showdiv()">show</a>
      <div id="d">
          <div my-Customer ng-if='anableCustomerDirective'></div>
      </div>
 </div>
</body>

Suggestion

si votre intention principale est de placer un contenu html après le clic, vous pouvez utiliser ng-include ici et ce sera beaucoup plus propre et pas besoin d'une autre directive.

<div id="d">        
    <div ng-include="templateURL"></div>
 </div>

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

trouver la démo

37
K.Toress

On dirait que la directive est uniquement destinée à charger template à partir d'elle. Je vous suggère d'utiliser ng-include directive alors

Marquage

<a href="#" ng-click="showDiv=true">show</a>
<div id="d"></div>
<div ng-include="showDiv ? 'my-customer.html': ''">
8
Pankaj Parkar

La façon la plus courante consiste à utiliser $compile. Plus d'informations: Ajouter dynamiquement la directive dans AngularJS

Votre contrôleur peut alors ressembler à ceci:

angular.module('docsTemplateUrlDirective', [])
  .controller('Controller', ['$scope', '$compile', function($scope, $compile) {

    $scope.showdiv = function(){
        var el = $compile( "<div my-customer></div>" )( $scope );
        $('#d').append( el );
    };
  }]);

Notez que l'invocation de la directive devrait ressembler à ceci: <div my-customer>, ne pas <div my-Customer></div> comme vous l'avez dans votre code.

1
Thomas Weglinski

lorsque vous le faites manuellement avec append, vous n'exécutez pas $ apply ou $ digest pour que la directive ne soit pas exécutée, pouvez-vous essayer de le faire avec ng-show ou ng-if ... par exemple

  <body ng-app="docsTemplateUrlDirective">
  <div ng-controller="Controller">
  <a href="#" ng-click="showdiv = true">show</a>
   <div my-customer ng-if="showdiv"></div>
  <div id="d"></div>
</div>
</body>

de cette façon angular exécute $ apply et la directive sera rendue.

0
Jony-Y