Question

我有一个从服务器返回的消息列表，我正在使用angular将这些消息模板化为表中的行。这一切都运行正常，但我想拥有它，所以当你点击一行模式弹出该行信息时。不幸的是，angular似乎完全忽略了隐藏元素，即使模态位于app和controller命名空间内（不确定命名空间是否是正确的术语）。我已经google了一下，发现了输入字段的BUNCH修复，但没有简单的绑定。这是我的代码。

HTML（表格）

<div class="ui modal">
    <div class="header">Message</div>
    <div class="content" style="background: none">
        <div><strong>Sent: </strong>[[ currentMessage.sent_at ]]</div>
        <div><strong>From: </strong>[[ currentMessage.email ]]</div>
        <div><strong>Phone: </strong>[[ currentMessage.phone || 'N/A' ]]</div>
        <div><strong>Subject: </strong>[[ currentMessage.subject ]]</div>
        <div style="margin-top: 10px">
            <h1>Message</h1>
            [[ currentMessage.body ]]
        </div>
    </div>
</div>

的JavaScript

$('.modal.ui').modal();

    var app = angular.module('messages', [], function($interpolateProvider) {
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    });

    app.controller('MessagesCtrl', function($scope, $http) {
        $scope.currentMessage = {};

        $http.get('{{ route('message.index') }}').then(function(resp) {
            $scope.messages = resp.data.messages;
        });

        $scope.show = function(message) {
            $scope.currentMessage = message;
        }
    });

HTML（全部）

<div style="padding: 10px" data-ng-app="messages" data-ng-controller="MessagesCtrl">
<table class="table ui celled striped">
    <thead>
        <tr style="text-align: center">
            <th class="collapsing">Email</th>
            <th class="collapsing">Phone</th>
            <th>Subject</th>
            <th style="width: 100px">Options</th>
        </tr>
    </thead>

    <tbody>
        <tr data-ng-repeat="message in messages | orderBy:['viewed', 'created_at']" class="message">
            <td>[[ message.email ]]</td>
            <td>[[ message.phone || 'N/A' ]]</td>
            <td>[[ message.subject ]]</td>
            <td>
                <a href="[[ message.mail_link ]]" style="color: #000"><i class="icon reply"></i></a>
                <i class="icon unhide" data-ng-click="show(message)"></i>
                <i class="icon trash" data-ng-click="destroy(message)"></i>
            </td>
        </tr>
        <tr>
            <td colspan="4" style="text-align: center">
                <strong style="font-size: 1.5em">No messages</strong>
            </td>
        </tr>
    </tbody>
</table>

<div class="ui modal">
    <div class="header">Message</div>
    <div class="content" style="background: none">
        <div><strong>Sent: </strong>[[ currentMessage.sent_at ]]</div>
        <div><strong>From: </strong>[[ currentMessage.email ]]</div>
        <div><strong>Phone: </strong>[[ currentMessage.phone || 'N/A' ]]</div>
        <div><strong>Subject: </strong>[[ currentMessage.subject ]]</div>
        <div style="margin-top: 10px">
            <h1>Message</h1>
            [[ currentMessage.body ]]
        </div>
    </div>
    <div class="actions">
        <a class="ui button green icon mini labeled">
            <i class="icon reply"></i>
            Reply
        </a>

        <button class="ui button red icon mini labeled">
            <i class="icon trash"></i>
            Delete
        </button>
    </div>
</div>

Answer 1

我弄明白了这个问题。对于那些在初始化模态时使用语义ui（也许还有bootstrap）的人，脚本会将它从你放置它的位置（在app指令中）移动到body标签的底部。就像@Maher在他的例子中所做的那样，整个身体都是应用程序和控制器来解决这个问题。

Answer 2

这是一个完整的例子：我使用bootstrap作为开放式模式

＆＃13;

<!doctype html>
<html ng-app="messages" ng-controller="MessagesCtrl">

<head>
  <link href="/Content/bootstrap.css" rel="stylesheet" />
  <script src="/Scripts/jquery-2.1.4.js"></script>
  <script src="/Scripts/bootstrap.js"></script>
  <script src="/Scripts/angular.js"></script>
</head>

<body>
  <div>
    <table class="table table-bordered">
      <thead>
        <tr style="text-align: center">
          <th class="collapsing">Email</th>
          <th class="collapsing">Phone</th>
          <th>Subject</th>
          <th style="width: 100px">Options</th>
        </tr>
      </thead>

      <tbody>
        <tr ng-repeat="message in messages" class="message">
          <td>{{ message.email }}</td>
          <td>{{ message.phone || 'N/A' }}</td>
          <td>{{ message.subject }}</td>
          <td>
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" ng-click="openModal(message)">
              show message
            </button>
            <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">
              remove message
            </button>
          </td>
        </tr>
        <tr>
          <td colspan="4" style="text-align: center">
            <strong style="font-size: 1.5em">No messages</strong>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <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" id="myModalLabel">Message</h4>
        </div>
        <div class="modal-body">
          <div><strong>Sent: </strong>{{ currentMessage.sent_at }}</div>
          <div><strong>From: </strong>{{ currentMessage.email }}</div>
          <div><strong>Phone: </strong>{{ currentMessage.phone || 'N/A' }}</div>
          <div><strong>Subject: </strong>{{ currentMessage.subject }}</div>
          <div style="margin-top: 10px">
            <h1>Message</h1>
            {{ currentMessage.body }}
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Delete</button>
          <button type="button" class="btn btn-primary">Reply</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    angular.module("messages", []);
    angular.module("messages").controller("MessagesCtrl", function($scope) {
      $scope.messages = [{
        email: "x@x.com",
        phone: "092222222",
        subject: "test",
        sent_at: "2015/15/15",
        body: "your message"
      }];

      $scope.openModal = function(message) {
        $scope.currentMessage = message;
      }
    });
  </script>
</body>

</html>

＆＃13;

角度忽略隐藏的元素

2 个答案: