Question

我正在为客户制作模态。我已经创建了一个工作得很好的指令，问题是每次使用它时都会提前一个模态...

我有什么

<div ng-repeat="item in items">
  <a data-toggle="modal" data-target="{{item.id}}">Click</a>
  <my-dialog element-id="item.id">
    <h1>This is the body of the modal</h1>
  </my-dialog>
</div>

这适用于少量模态，但我们使用了大量的模态。所以我想在运行时添加指令，更接近......

我想要的......

<div id="warning"></div>
<div ng-repeat="item in items">
  <a data-toggle="modal" data-target="{{item.id}}" ng-click="showModal(item)">Click</a>
</div>
...
// inside controller
$scope.showModal = function(item){
  $http.get('/someUrl').success(function(data){
    var result = $compile('<my-dialog element-id="'+item.id+'">'+data+'</my-dialog>').($scope);
    $("#warning").append(result);
  });
}
$scope.hideModal = function(){
  $( "#warning" ).empty();
}

这当然不起作用。它也不是最好的方式。这将允许我在指令关闭后删除它。

请提供支票或等效物品。

Answer 1

您可以这样做的一种方法是对项目使用ng-repeat，然后在将新项目推送到列表后调用$ scope。$ apply（）。 HTML可能看起来像这样......

<div ng-repeat="item in items">
  <span dialog>
    <a class="dialog-anchor">{{item.name}}</a>
    <div class="dialog-body">{{item.id}}</div>
  </span>
</div>

......和这样的指令

.directive('dialog', [function () {
    return {
    scope: {
    id: '@elementId',
  }
  , link: function (scope, el, attrs) {
    var body = $(el).find('.dialog-body').detach();
    $(el).find('.dialog-anchor').on('click', function () {
      $('body').append(body);
    });
  }};
  }])

......和这样的控制器

.controller('app', ['$scope', function ($scope) {
  $scope.items = [
    {name: 'first', id: 001},
    {name: 'second', id: 002}
  ];

  setTimeout(function () {
    $scope.items.push({name: 'three', id: 003});
    if (!$scope.$$phase) $scope.$apply();
  }, 2000);  
}])

这里的掠夺者...... http://plnkr.co/edit/2ETbeCKGcHW3CJCfD9d7?p=preview。您可以在setTimeout中看到$ scope。$ apply调用，我将新项目推送到数组。

Answer 2

试试这个：

 var result = $compile('<my-dialog element-id="'+item.id+'">'+data+'</my-dialog>')($scope);

使用ng-click动态添加指令

2 个答案: