Angular ignoring hidden elements

Question

I have a list of messages returned from a server and i'm using angular to template those messages into rows in a table. That all works fine, but i want to have it so when you click the row a modal pops up with that rows information. Unfortunately angular seems to completely ignore hidden elements even though the modal is within the app and controller namespace (not sure if namespace is the proper term). I have googled around and found a BUNCH of fixes for input fields but none for just simple binding. Heres my code.

HTML (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>

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 (All)

<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>

hi i answered this question in this page [popup](http://stackoverflow.com/questions/34262461/add-item-json-in-angular-with-pop-up/34262614#34262614) — Maher, Dec 15 '15 at 03:57
@Maher I don't see what you're doing differently in yours... — Cole, Dec 15 '15 at 04:27

score 0 · Answer 1 · answered Dec 15 '15 at 04:38

I figured out the problem. For those using semantic ui (and perhaps bootstrap) when the modal is initialized a script will move it from where you placed it (in the app directive) to the the bottom of the body tag. Like @Maher did in his example make the entire body the app and controller to fix this.

score 0 · Accepted Answer · answered Dec 15 '15 at 04:58

This is full example: i used bootstrap for open modal

<!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>

Angular ignoring hidden elements

2 Answers2