Angular JS - 单击按钮从指令加载模板 html答案

【问题标题】：Angular JS - Load a template html from directive on click of a buttonAngular JS - 单击按钮从指令加载模板 html
【发布时间】：2015-09-07 03:54:16
【问题描述】：

我正在尝试在单击链接时加载 HTML 模板。我做了一个包含templateUrl 的指令，它加载一个HTML 文件。当单击链接时，我正在调用一个函数，该链接将带有我们自定义指令“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>

脚本.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);

我的客户.html

<p>DIV CONTENT</p>

这是我正在测试此代码的链接here

【问题讨论】：

使用$compile服务
是否将 myCustomer 指令用于加载 templateUrl？
是的，就是点击链接时加载url

标签： javascript jquery html angularjs angularjs-directive

【解决方案1】：

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

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

像控制器一样，

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

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

}])

这里是DEMO

或者这样做很好，

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

【讨论】：

就像我问的那样，您对代码进行了更改..很酷的答案..这解释了错误和正确的所有可能性：p +1来自我伙计。干杯:)
这很好用，但是如果我动态创建了一个表单并想用不同的变量绑定值怎么办？如何获取动态添加表单的索引？

【解决方案2】：

似乎指令只是为了从中加载template。我建议你使用ng-include指令然后

标记

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

【讨论】：

我也是支持你的答案的两个人之一......谢谢：D
@VikramSinghJadon 这就是我在评论中问你的原因..很高兴帮助你..感谢您的赞赏:)

【解决方案3】：

最常见的方式是使用$compile。更多信息：Dynamically add directive in 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>。

【讨论】：

@pankajparkar 感谢您的提示，但我刚刚回答了 Vikram 代码有什么问题的问题。
您应该以正确的方式回答..不要让 OP 走错路..这可能导致他遇到不同的问题..虽然我没有投反对票：p

【解决方案4】：

当您使用 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 并且指令将被渲染。

【讨论】：