Question

我是angular.js的新手，看完codeschool free course之后，我决定尝试一些不同的东西。

我试图使用按钮：

将Angular自定义指令注入已存在的引导模式体;
将Angular控制器中的JSON数组推送到此指令中;
显示引导模式

我为此测试创建了以下文件：

** pictures-table.html：

<p ng-hide="pictures.length">No Pictures</p>
<table ng-show="pictures.length">
  <thead>
  <tr>
    <th>Picture</th>
    <th>Label</th>
    <th>Remove</th>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="aPic in pictures">
    <td><img ng-src="{{aPic.pThumb}}"/></td>
    <td><input type='text' ng-model='aPic.text'/></td>
    <td><button class="close" type="button"><span>&times;</span></button></td>
  </tr>
  </tbody>
</table>

** loadNg.js：

(function () {
    var app = angular.module('ngMod', []);    
    app.controller("ItemsController", function () {
        var theControler = this;
        theControler.item = {id:1, name:"aaaa", pictures: [
          {text:"pic 1", pLarge:"1.jpg", pThumb:"1s.jpg"},
          {text:"pic 2", pLarge:"2.jpg", pThumb:"2s.jpg"},
          {text:"pic 3", pLarge:"3.jpg", pThumb:"3s.jpg"},
          {text:"pic 4", pLarge:"4.jpg", pThumb:"4s.jpg"}
          ]};

        theControler.editPictures = function () {
            $('.modal-title').html('Edit Pictures');
            $('.modal-body').html('<pictures-table></pictures-table>');
            $('#btnLaunchModal').click();
        };

    });
    app.directive('picturesTable', function () {
        return {
            restrict: 'E',
            templateUrl: 'pictures-table.html'
        };
    });

})();

我将标准的boostrap模式放在我的“index.html”文件的底部，并添加了一个隐藏按钮来触发它（是的，我只是从现有代码中复制它）：

<!DOCTYPE html>
<html ng-app="ngMod">
<head>
  <title>testNG</title>
  <link href="bootstrap.css" media="all" rel="stylesheet">
  <link href="bootstrap-theme.css" media="all" rel="stylesheet">
</head>
<body role="document">


<div class="container theme-showcase" role="main" ng-controller="ItemsController as itemsCTRL">
    <p><strong>{{itemsCTRL.item.id}} -- {{itemsCTRL.item.name}}</strong></p>
    <button class="btn btn-lg btn-default" type="button" ng-click="itemsCTRL.editPictures()">Call Modal</button>
    <pictures-table></pictures-table>
</div>

<button id="btnLaunchModal" type="button" style="display: none" data-toggle="modal" data-target="#theModal">
  Launch modal
</button>
<div class="modal fade" id="theModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap.js"></script>
<script src="angular.js"></script>
<script src="loadNg.js"></script>
</body>
</html>

测试01：使用指令“picturesTable”进入索引文件“index.html”（这部分工作正常）：

现在出现问题：

我尝试使用控制器函数“editPictures”注入自定义指令。我将此功能链接到索引页面上的按钮。

单击“调用模态”按钮时，将显示引导模式，但生成的“模态体”部分的html未评估我的注入指令。我还没有尝试设置JSON对象。注入的html看起来像这样：

...
<div class="modal-body">
    <pictures-table></pictures-table>
</div>
...

我期待角度指令的魔力发生，我会缺少什么？

我是否应该忽略此测试并探索将指令注入此模式的其他方法？如果是这样，那会是更好的方法吗？

感谢任何帮助。

Answer 1

您需要通过angular提供的$complile服务编译您的指令html，并将编译后的元素（不是普通的html ）添加到模态中。请尝试以下代码段：

$compile('<pictures-table></pictures-table>')(scope, function(clonedElement, scope) {
    $('.modal-body').html(clonedElement);
});

您必须通过注入$compile服务

来更新控制器声明

app.controller("ItemsController", ['$compile', function ($compile) {

}]);

您的代码应如下所示：

app.controller("ItemsController", ['$compile','$scope', function ($compile,$scope) {
 var theControler = this;
    theControler.item = {id:1, name:"aaaa", pictures: [
      {text:"pic 1", pLarge:"1.jpg", pThumb:"1s.jpg"},
      {text:"pic 2", pLarge:"2.jpg", pThumb:"2s.jpg"},
      {text:"pic 3", pLarge:"3.jpg", pThumb:"3s.jpg"},
      {text:"pic 4", pLarge:"4.jpg", pThumb:"4s.jpg"}
      ]};
    $scope.pictures = theControler.item.pictures;
    theControler.editPictures = function () {
        $('.modal-title').html('Edit Pictures');
        $compile('<pictures-table></pictures-table>')($scope,   function(clonedElement, $scope) {
           $('.modal-body').html(clonedElement);
        });
        $('#btnLaunchModal').click();
    };
}]);

如何将AngularJS自定义指令注入bootstrap预加载模式？

1 个答案: