如何在 ui bootstrap modal 指令中嵌入内容答案

【问题标题】：How to transclude content in ui bootstrap modal directive如何在 ui bootstrap modal 指令中嵌入内容
【发布时间】：2013-03-07 23:23:29
【问题描述】：

我在 ui bootstrap modal 指令之上创建了一个自定义指令，因此我可以在我的应用程序中的任何地方使用相同的模态模板。

我的指令一直有效，直到我尝试将其内容嵌入到模板中：

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

来自 index.html

<div ng-controller="ModalDemoCtrl">
  <button class="btn" ng-click="open()">Open me!</button>
  
  <my:modal open="shouldBeOpen" close="close()">
    <h1>Content</h1>
  </my:modal>
</div>

模块代码：

angular.module('plunker', ['ui.bootstrap'])

.controller('ModalDemoCtrl', function($scope) {
  $scope.open = function () {
    $scope.shouldBeOpen = true;
  };

  $scope.close = function () {
    $scope.closeMsg = 'I was closed at: ' + new Date();
    $scope.shouldBeOpen = false;
  };

  $scope.items = ['item1', 'item2'];

})


.directive('myModal', function() {
  return {
    restrict : 'E',
    templateUrl: 'myTpl.html',
    //transclude: true,
    scope : {
      open : '=',
      close : '&'
    }
  };
});

模态模板：

<div modal="open">
    <div class="modal-header">
        <h4>I'm a modal!</h4>
    </div>
    <div class="modal-body">
      <!--<div ng-transclude/>-->
    </div>
       
    
    <div class="modal-footer">
      <button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
    </div>
</div>

从指令和模板中取消注释 transclude 属性，你会看到你得到一个TypeError: undefined is not a function.

我不知道我做错了什么。

【问题讨论】：

标签： angularjs angularjs-directive angular-ui

【解决方案1】：

OP，你的 sn-p 正是我想要做的——谢谢！

我通过 replace:true 和 transclude: true 设法让你的 plunk 工作

这是更新的 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的工作原理

【讨论】：

感谢您的回答。我会试一试。但是，老实说，我更想知道我的示例中有什么问题
我决定做一个不使用 angular-ui 的解决方案，因为 angular-ui 给我的问题多于解决方案。但会密切关注来自 angular-ui 的模态指令