Flo*_*n F 7 angularjs angular-ui angularjs-directive
我已经在ui bootstrap模态指令的基础上制作了一个自定义指令,所以我可以在我的应用程序中的任何地方使用相同的模态模板.
我的指令有效,直到我尝试将其内容转换为模板:
http://plnkr.co/edit/YPESA3?p=preview
(从指令和模板取消注释transclude属性,你会看到你得到一个TypeError:undefined不是一个函数)
我无法弄清楚我做错了什么
OP,你的代码片段正是我想要做的 - 谢谢!
我设法让你的普拉克通过传递工作replace:true以及transclude: true
这是更新的插件http://plnkr.co/edit/gxCS2V?p=preview
我是Angular的新手,所以我有兴趣知道为什么:
replace - 如果设置为true,则模板将替换当前元素,而不是将模板附加到元素.
(通过Angular文档)
一旦你知道,这当然是有道理的.
很高兴知道您是否希望使您的指令特别可回收.模态是非常完美的例子.
相关:ui-bootstrap值得一试.
检查此解决方案，您不需要额外的控制器或 angular-ui，只需传递一个简单的处理程序并使用它
\n\nangular.module(\'plunker\', [], function() {\n\n})\n\n.directive(\'modal\', function() {\n return {\n restrict : \'E\',\n templateUrl: \'myTpl.html\',\n transclude: true,\n controller: function($scope) {\n // you need get a better unique generator\n $scope.modal_id = \'modal_\' + Math.floor((Math.random()*100+1));\n $scope.handler = $scope.modal_id;\n },\n scope : {\n handler : \'=\'\n }\n };\n})\n.run();\n<!doctype html>\n<html ng-app="plunker">\n <head> \n <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> \n </head>\n<body>\n\n<div ng-init="handler = null"> \n <modal handler="handler">\n <h1>Content</h1>\n </modal> \n <a href="#{{handler}}" role="button" class="btn primary" data-toggle="modal">Open me</a>\n</div>\n <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>\n <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> \n <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>\n <script src="example.js"></script>\n</body>\n</html>\n<div id="{{modal_id}}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="{{modal_id}}Label" aria-hidden="true">\n <div class="modal-header">\n <button type="button" class="close" data-dismiss="modal" aria-hidden="true">\xc3\x97</button>\n <h4 id="{{modal_id}}Label">I\'m a modal!</h4>\n </div>\n <div class="modal-body">\n <div ng-transclude></div>\n </div> \n <div class="modal-footer">\n <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>\n </div>\n</div>\n