我的自定义指令在页面加载时运行良好，但使用附加添加时它无法正常运行。它在运行时不显示其内容。
HTML:
<!doctype html>
<html lang="en" ng-app="module1">
<head>
<meta charset="UTF-8">
<title>Angular Demo</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/angular.js"></script>
<script src="js/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div id="divContainer" style="border-style: solid;border-color:red;" ng-controller = "Controller1 as cnt1" >
<button ng-click="clicked();">Click Me!!</button>
<wlaccordion></wlaccordion>
</div>
</body>
</html>
app.js:
var app = angular.module('module1',[]);
app.controller('Controller1', ['$scope', function($scope) {
$scope.authorData = authorInfo;
$scope.clicked = function () {
alert('Clicked');
//angular.element(document.getElementById('divContainer')).append('<wlaccordion1></wlaccordion1>' (scope));
angular.element(document.getElementById('divContainer')).append('<wlaccordion></wlaccordion>');
}
}]);//controller1
var authorInfo = [
{
'name': 'Ray',
'rate': '10',
'show': 'true'
},
{
'name': 'Mahesh',
'rate': '12',
'show': 'true'
}
]
app.directive("wlaccordion", function($compile) {
var template = '<div ng-controller = "Controller1 as cnt1">' +
'<div ng-repeat="aData in authorData" ng-init="tab = 1">' +
'<ul>' +
'<li>' +
'<h1 ng-show={{aData.show}} ng-class="{active: tab === 1}"> {{aData.name}} </h1>' +
'<h1 ng-show={{aData.show}} ng-class="{active: tab === 2}"> {{aData.rate | currency}} </h1>' +
'</li>' +
'</ul>' +
'</div>' +
'</div>';
return{
link: function(scope, element){
var content = $compile(template)(scope);
element.append(content);
}
}
});
我希望该指令的功能与 onload 相同。
-谢谢 马赫什
最佳答案
AngularJS 旨在分离表示逻辑和业务逻辑。所以我认为你应该以 Angular 的方式来做这件事，你目前的方法更多的是 jQuery 的。
我建议您将 Accordion 集合添加到 Controller :
app.controller('Controller1', ['$scope', function($scope) {
$scope.accordions = [0]; // Replace 0 with some actual data
$scope.clicked = function() {
$scope.accordions.push($scope.accordions.length); // Same here
};
// Your other code
}
并在 HTML 中添加 ng-repeat:
<div id="divContainer" style="border-style: solid;border-color:red;" ng-controller = "Controller1 as cnt1" >
<button ng-click="clicked();">Click Me!!</button>
<wlaccordion ng-repeat="accordion in accordions"></wlaccordion>
</div>
编辑:另外，不要忘记从 wlaccordion 的链接中删除编译。
编辑 #2: 我认为 authorInfo 全局变量只是简单地使用，但是如果它不使用，则考虑使用 module.constant 或 module.value
关于javascript - AngularJS动态自定义指令问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30531176/