Angular JS-点击按钮，从指令加载一个模板html

Angular JS - Load a template html from directive on click of a button

本文关键字：一个 html 加载 JS- 按钮 指令 Angular      更新时间：2023-09-26

单击链接时，我正在尝试加载HTML模板。我制作了一个指令，其中包含加载HTML文件的templateUrl。当点击一个链接时，我正在调用一个函数，该链接将一个带有自定义指令"myCustomer"的div附加到index.html中的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>

这是我在这里测试这个代码的链接

这是因为如果您附加这样的内容，则angular不会绑定指令，

您需要$compile服务来执行此操作，这将绑定针对您的$scope 的指令

所以像控制器，

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

这是演示

或者这样做很好，

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

似乎指令只用于从中加载template。我建议您使用ng-include指令，然后使用

标记

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

最常见的方法是使用$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>。

当您使用append手动执行时，实际上不会运行$apply或$digest，因此指令不会运行，你能试着用ng show还是ng if。。。例如

  <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，指令将被呈现。

相关文章：