Angular JS - 在点击一个按钮时从指令加载模板html [英] Angular JS - Load a template html from directive on click of a button
问题描述
我试图在单击链接时加载HTML模板。我做了一个指令，其中包含加载HTML文件的 templateUrl 。我点击一个链接时会调用一个函数，该链接将div的自定义指令myCustomer附加到已在index.html中的div。无论我迄今为止所做的事情如下所示，但它不起作用。
index.html
<！doctype html>
< html lang =en>
< head>
< meta charset =UTF-8>
< title>示例 - 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（）>显示< / a>
< div id =d>< / div>
< / div>
< / body>
< / html>
script.js
（function（angular）{
'use strict';
angular.module（'docsTemplateUrlDirective'，[]）
.controller（'Controller'，['$范围'，函数（$ scope）{
$ scope.showdiv = function（）{
$（＃d）。append（< div my-Customer>< （'myCustomer'，function（）{
return {
templateUrl：'my-customer'）;
};
}]）
.directive .html'
};
}）;
}）（window.angular）;
my-customer.html
< p> DIV CONTENT< / p>
以下是我测试此代码的链接 here 解决方案
如果您追加内容如此，则不会绑定指令
您需要 所以控制器就像 这里是 DEMO 或可以这样做， 使用 试用此代码 控制器， HTML 建议 如果您的主要目的是在点击后放置html内容，那么您可以使用 找到 DEMO I am trying to load a HTML template when a link is clicked. I have made a directive that contains index.html script.js my-customer.html Here is the link i was testing this code here This is because the angular doesn't bind the directives if you append content like this, you need to so controller like, here is the DEMO OR good to do like this, use try this code Controller, HTML
Suggestion if your main intention is to place a html content after the click, then you can use find the DEMO 这篇关于Angular JS - 在点击一个按钮时从指令加载模板html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ $ compile 服务来做到这一点，这将绑定指令针对您的 $ scope
.controller（'Controller '，['$ scope'，'$ compile'，function（$ scope，$ compile）{
$ b $ scope.showdiv = function（）{
var compiledeHTML = $ compile（ < / div>）（$ scope）;
$（＃d）。append（compiledeHTML）;
};
}]）
ng-if 创建或从html中删除元素，
....
$ scope.anableCustomerDirective = false;
$ scope.showdiv = function（）{
$ scope.anableCustomerDirective = true;
};
< body ng-app =docsTemplateUrlDirective>
< div ng-controller =Controller>
< a href =＃ng-click =showdiv（）>显示< / a>
< div id =d>
< div my-Customer ng-if ='anableCustomerDirective'>< / div>
< / div>
< / div>
< / body>
ng -include 这里，它会更干净，不需要另一个指令。
< div id =d>
< div ng-include =templateURL>< / div>
< / div>
$ scope.showdiv = function（）{
$ scope.templateURL ='my-customer.html';
};
templateUrl which loads a HTML file. I am calling a function when a link is clicked that appends a div with our custom directive "myCustomer" to a div already in index.html. whatever i have done so far is shown below, but it doesn't work. <!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>
(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);
<p>DIV CONTENT</p>
$compile service to do this and this will bind the directives against your $scope.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.showdiv = function(){
var compiledeHTML = $compile("<div my-Customer></div>")($scope);
$("#d").append(compiledeHTML);
};
}])
ng-if to create or removing element from html,....
$scope.anableCustomerDirective = false;
$scope.showdiv = function(){
$scope.anableCustomerDirective = true;
};
<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>
ng-include here and it will much cleaner and no need of a another directive.<div id="d">
<div ng-include="templateURL"></div>
</div>
$scope.showdiv = function(){
$scope.templateURL = 'my-customer.html';
};
