Angular JS - 单击按钮从指令加载模板 html
Posted
技术标签:
【中文标题】Angular JS - 单击按钮从指令加载模板 html【英文标题】：Angular JS - Load a template html from directive on click of a button 【发布时间】：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
【参考方案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 并且指令将被渲染。
【讨论】：
以上是关于Angular JS - 单击按钮从指令加载模板 html的主要内容，如果未能解决你的问题，请参考以下文章