web-dev-qa-db-ja.com

Angular JS-ボタンのクリック時にディレクティブからテンプレートhtmlをロードする

リンクがクリックされたときにHTMLテンプレートをロードしようとしています。 HTMLファイルをロードするtemplateUrlを含むディレクティブを作成しました。 index.htmlにあるdivにカスタムディレクティブ「myCustomer」を含むdivを追加するリンクがクリックされたときに、関数を呼び出しています。私がこれまでにしたことはすべて以下に示されていますが、うまくいきません。

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>

ここに私がこのコードをテストしていたリンクがあります here

javascriptjqueryhtmlangularjsangularjs-directive
22
Vikram Singh Jadon

これは、angularがこのようなコンテンツを追加した場合にディレクティブをバインドしないためです。

必要がある - $compile これを行うサービス。これにより、ディレクティブが$scope

コントローラーのような、

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

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

}])

[〜＃〜] demo [〜＃〜]

[〜＃〜] or [〜＃〜]このようにするのは良いことですが、

つかいます - ng-if htmlから要素を作成または削除するには、

このコードを試してください

コントローラー、

....
$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>

提案

クリック後にHTMLコンテンツを配置することが主な目的である場合は、 ng-include ここで、さらにきれいになり、別のディレクティブは不要になります。

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

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

[〜＃〜] demo [〜＃〜] を見つけます

37
K.Toress

ディレクティブはtemplateをロードすることのみを意図しているようです。ng-includeディレクティブ

マークアップ

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

最も一般的な方法は、$compileを使用することです。詳細： AngularJSで動的にディレクティブを追加

コントローラーは次のようになります。

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

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

ディレクティブの呼び出しは、コードにある<div my-customer>ではなく<div my-Customer></div>のように見えることに注意してください。

1
Thomas Weglinski

appendを使用して手動で行う場合、実際には$ applyまたは$ digestを実行しないため、ディレクティブは実行されません。ng-showまたはng-if ... e.g

  <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>

このようにangularは$ applyを実行し、ディレクティブがレンダリングされます。

0
Jony-Y