Question

我在ui bootstrap模态指令的基础上制作了一个自定义指令，所以我可以在我的应用程序的任何地方使用相同的模态模板。

我的指令有效，直到我尝试将其内容转换为模板：

http://plnkr.co/edit/YPESA3?p=preview

（从指令和模板取消注释transclude属性，你会看到你得到一个TypeError：undefined不是函数）

我无法弄清楚我做错了什么

Answer 1

OP，你的代码片段正是我想要做的 - 谢谢！

我设法通过传递replace:true以及transclude: true

让您的插件工作

这是更新的plunk http://plnkr.co/edit/gxCS2V?p=preview

我是Angular的新手，所以我很想知道原因：

replace - 如果设置为true，则模板将替换当前元素，而不是将模板附加到元素。

（通过Angular文档）

一旦你知道，这当然是有道理的。

很高兴知道您是否希望使您的指令特别可回收。模态是非常完美的例子。

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>

了解plunker

的工作原理

如何在ui bootstrap模态指令中转换内容

2 个答案:

example.js

的index.html

myTpl.html