I've made a custom directive on top of ui bootstrap modal directive so I can use the same modal template everywhere in my app.
我已经在ui bootstrap模态指令的基础上制作了一个自定义指令,所以我可以在我的应用程序中的任何地方使用相同的模态模板。
My directive works until I try to transclude its content into the template :
我的指令有效,直到我尝试将其内容转换为模板:
http://plnkr.co/edit/YPESA3?p=preview
(Uncomment transclude property from the directive and the template and you'll see you get a TypeError: undefined is not a function)
(从指令和模板取消注释transclude属性,你会看到你得到一个TypeError:undefined不是一个函数)
I can't figure what I'm doing wrong
我无法弄清楚我做错了什么
2 个解决方案
#1
6
OP, your snippet is exactly what I was looking to do—thanks!
OP,你的代码片段正是我想要做的 - 谢谢!
I managed to get your plunk working by passing replace:true as well as transclude: true
我设法通过传递replace:true以及transclude:true来让你的插件工作
Here's the updated plunk http://plnkr.co/edit/gxCS2V?p=preview
这是更新的插件http://plnkr.co/edit/gxCS2V?p=preview
I'm new to Angular, so I was interested to know why:
我是Angular的新手,所以我有兴趣知道为什么:
replace - if set to true then the template will replace the current element, rather than append the template to the element.
replace - 如果设置为true,则模板将替换当前元素,而不是将模板附加到元素。
(via the Angular docs)
(通过Angular文档)
Which, of course makes sense once you know.
一旦你知道,这当然是有道理的。
Good to know if you want to make your directive especially recyclable. Modals are pretty perfect example.
很高兴知道您是否希望使您的指令特别可回收。模态是非常完美的例子。
Related : ui-bootstrap is worth checking out.
相关:ui-bootstrap值得一试。
#2
3
Check this solution, you dont need a extra controller or angular-ui for that only pass a simple handler and use it
检查这个解决方案,你不需要额外的控制器或angular-ui,只需通过一个简单的处理程序并使用它
example.js
angular.module('plunker', [], function() {
})
.directive('modal', function() {
return {
restrict : 'E',
templateUrl: 'myTpl.html',
transclude: true,
controller: function($scope) {
// you need get a better unique generator
$scope.modal_id = 'modal_' + Math.floor((Math.random()*100+1));
$scope.handler = $scope.modal_id;
},
scope : {
handler : '='
}
};
})
.run();
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-init="handler = null">
<modal handler="handler">
<h1>Content</h1>
</modal>
<a href="#{{handler}}" role="button" class="btn primary" data-toggle="modal">Open me</a>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="example.js"></script>
</body>
</html>
myTpl.html
<div id="{{modal_id}}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="{{modal_id}}Label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="{{modal_id}}Label">I'm a modal!</h4>
</div>
<div class="modal-body">
<div ng-transclude></div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
look how works in plunker
看看如何在plunker中工作
#1
6
OP, your snippet is exactly what I was looking to do—thanks!
OP,你的代码片段正是我想要做的 - 谢谢!
I managed to get your plunk working by passing replace:true as well as transclude: true
我设法通过传递replace:true以及transclude:true来让你的插件工作
Here's the updated plunk http://plnkr.co/edit/gxCS2V?p=preview
这是更新的插件http://plnkr.co/edit/gxCS2V?p=preview
I'm new to Angular, so I was interested to know why:
我是Angular的新手,所以我有兴趣知道为什么:
replace - if set to true then the template will replace the current element, rather than append the template to the element.
replace - 如果设置为true,则模板将替换当前元素,而不是将模板附加到元素。
(via the Angular docs)
(通过Angular文档)
Which, of course makes sense once you know.
一旦你知道,这当然是有道理的。
Good to know if you want to make your directive especially recyclable. Modals are pretty perfect example.
很高兴知道您是否希望使您的指令特别可回收。模态是非常完美的例子。
Related : ui-bootstrap is worth checking out.
相关:ui-bootstrap值得一试。
#2
3
Check this solution, you dont need a extra controller or angular-ui for that only pass a simple handler and use it
检查这个解决方案,你不需要额外的控制器或angular-ui,只需通过一个简单的处理程序并使用它
example.js
angular.module('plunker', [], function() {
})
.directive('modal', function() {
return {
restrict : 'E',
templateUrl: 'myTpl.html',
transclude: true,
controller: function($scope) {
// you need get a better unique generator
$scope.modal_id = 'modal_' + Math.floor((Math.random()*100+1));
$scope.handler = $scope.modal_id;
},
scope : {
handler : '='
}
};
})
.run();
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-init="handler = null">
<modal handler="handler">
<h1>Content</h1>
</modal>
<a href="#{{handler}}" role="button" class="btn primary" data-toggle="modal">Open me</a>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="example.js"></script>
</body>
</html>
myTpl.html
<div id="{{modal_id}}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="{{modal_id}}Label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="{{modal_id}}Label">I'm a modal!</h4>
</div>
<div class="modal-body">
<div ng-transclude></div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
look how works in plunker
看看如何在plunker中工作