Question

我想将一个项目/对象（＆＃39; ca＆＃39;）从转发器传递到同一控制器上下文中的另一个元素（在本例中为模态）：

<div data-ng-controller="ContactActionCtrl" data-ng-app="myApp" runat="server">
  <div class="row">
    <div class="col-sm-12">
        <h2>Tasks</h2>
        <table class="table">
            <thead>
                <tr>
                    <th>Created</th>
                    <th>Due</th>
                    <th>Completed</th>
                    <th>Created By</th>
                    <th>Assigned</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody data-ng-repeat="ca in contactactions | filter:{ObjectType:'Task'}">
                <tr data-actionid="{{ca.Id}}" data-toggle="modal" data-target="#actionDetail">
                    <td>{{ca.CreationDate | date:"MM/dd/yyyy"}}</td>
                    <td>{{ca.ActionDate | date:"MM/dd/yyyy 'at' h:mma"}}</td>
                    <td>{{ca.CompletionDate | date:"MM/dd/yyyy"}}</td>
                    <td>{{ca.CreatedByUsername}}</td>
                    <td>{{ca.UserIDUsername}}</td>
                    <td><label data-ng-if="ca.ActionType">{{ca.ActionType}} - </label><label>{{ca.ActionDescription}}</label><br>{{ca.CreationNotes | limitTo:270}}</td>
                </tr>
            </tbody>
        </table>
    </div>
  </div>
  <div id="actionDetail" class="modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{ca.ActionDescription}}</h4>
            </div>
            <div class="modal-body">
                //more details from ca here
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

一切正常，包括从行单击中弹出bootstrap模态div，除了实际从转发器外部填充它。由于完整对象仍然在内存中，我希望避免再次从数据库中获取单个项目（使用不同的服务调用）以填充模态。即使我显示模态，我认为这个问题可能适用于位于转发器之外的任何元素/元素集。

Answer 1

我认为最直接的方法是让模态显示不同的单个变量，例如：＆＃39; ca.selectedItem＆＃39;然后当您单击某个项目时，使用该对象填充selectedItem。我会看看能不能举一个例子。

控制器：

$scope.contactActions = [{name:"Action 1"},{name:"Action 2"},{name:"Action 3"}] 
$scope.selectedAction = {name:""};

$scope.rowClick = function(event, selected) {
  $scope.selectedAction = selected;
};

标记：

<tr data-actionid="{{ca.Id}}" ng-click="ca.rowClick($event, i)" data-toggle="modal" data-target="#actionDetail">

这里是plunk。

P.S。你可以使用Angular的bootstrap，但它使用非角度javascript（即jquery）绕过Angular来做DOM操作之类的事情。这通常会导致Angular无法正确更新它的绑定，因此您最终会像$ scope.apply（）那样手动告诉Angular更新它的所有绑定。一种替代方法是使用UI Bootstrap使用相同的css，但javascript已在Angular中重新实现。

如何将项目从ng-repeat传递或引用到另一个元素？

1 个答案: