Angular JS-单击按钮即可从指令加载模板html
单击链接时，我试图加载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>
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';
};
找到演示
-
问题内容： 我想做的是推迟为指令加载角度js模板，直到我真正需要它为止。我什至根本不需要它。有没有一种方法可以只在需要时才加载指令的模板。服务会成为这样做的方式吗？我的应用程序已经加载了很多指令模板，除非我需要，否则我希望避免加载太多的东西。当前的确切问题是为登录表单加载模板。如果用户单击按钮，但他/她未登录，则我要slideOpen（使用jQuery）登录表单。 问题答案： 在绝大多数情况下，动
-
问题内容： 接下来的代码使用Modal react组件： 我正在尝试使用以下方式调用它： 和 我的意思是，单击此按钮后，没有任何显示。还有另一种方法可以调用该模式吗？我从以下位置导入模式： 从“反应-响应-模态”导入模态 问题答案： 您试图仅在单击按钮后才渲染模态，这对于非反应性环境是很自然的，但在反应中它以不同的方式起作用。在最简单的解决方案中，应始终呈现，当用户单击按钮时，将modal 属性更
-
问题内容： 我有一个带有按钮的Class Circle和一个带有jPanel的Class I，我想做的是单击该按钮时会在面板上绘制一个圆圈，每次我单击该按钮并更改x和y“有些不怎么实现在这里”，我一遍又一遍地在JPanel上绕了一圈。如何做到这一点，或者有一种方法可以执行我描述的内容，而不管我的代码如何，但是我希望类圈子扩展Shape。 然后是圆班 问题答案： 您有点错误的主意。在绘图面板中，您应
-
问题内容： 在以下情况下如何使用包含。目的是在html（部分）文件中使用标记，而不是在模板中（在指令内）定义标记。 我在这里找到了一个很棒的树指令。（ 来源）原文： http //jsfiddle.net/n8dPm/ 我没有在指令中定义模板，而是尝试使用包含在内的内容。我还将Angular更新为1.2.0.rc2。更新时间：http：//jsfiddle.net/aZx7B/2/ 低于错误 Ty
-
问题内容： 我正在尝试根据范围值使用不同的模板进行指令。 这是我到目前为止所做的，我不知道为什么它不起作用http://jsbin.com/mibeyotu/1/edit HTML元素： 指示： 问题答案： 1）您正在将内容作为属性传递到html中。试试这个： 代替： 2）指令的数据部分正在被编译，因此您应该使用其他东西。代替数据类型，例如datan-type。 链接在这里： http://jsb
-
问题内容： 这是我的AngularJs指令。它原本希望在模板中显示div，但是在运行代码时却什么也没有显示。 这是HTML 这是AngularJS指令 这是演示 问题答案： 声明指令时，您使用了名称，但这是错误的。您应该使用，因为它将被转换为元素。 指令名称中的任何大写字母都将转换为连字符，因为元素中未使用大写字母。例如将翻译为。 正如其他人提到的，AngularJS使用以下标准化规则进行标准化：