Menu icon Foundation
foundation reveal modal w/ angular.js

So I'm wondering if I can simple use angular.js to display data into a modal reveal or if I need to use some module to enable angular to work with foundation reveal modal. Right now, i'm working on this search filter that needs to be clickable and display the reveal modal with the relavant course info. Here is my html with the angular and reveal modal:

<div class="row">
    <div class="small-12 columns">
      <div class="row">
          <div class="small-6 columns"><h1>Full Course Search</h1>
       <div>
      <label>Filter:</label>
      <input type="text" ng-model="searchTxt" placeholder="Enter a class here">
      <hr></div>
      </div>
       
<!--      <h1>Test {{searchTxt}}!</h1>-->
    </div>
 <table ng-controller="oflClassCtrl">
  <thead>
    <tr>
      <th>Course Title(Apex/Isis)</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat = "c in classes | filter:searchTxt">
        <td><a href="{{c.href}}"  ng-click="setClass($index)">{{c.class}}</a></td>
        
    </tr>
    
  
      
    
    
    
  </tbody>
  
</table>
    </div>
</div>
<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

<div id="myModal" class="reveal-modal" data-reveal>
  <div class="accordion accorborder" ng-controller="oflClassCtrl" data-accordion>
        <div class="accordion-navigation">
            <h3>{{c.class}} </h3>
            <div id="p1" class="content">
               <div class="row">
                   <div class="small-6 columns">
                        <h6>Code:</h6>{{c.code}}
                        <h6>Offerings:</h6>{{c.offerings}}
                   </div>
                   <div class="small-6 columns">
                       
                       <h6>Course Materials:</h6>
                       <ul>
                           <li>
                               <a href="{{c.syl}}">Syllabus</a>
                           </li>
                           <li>
                               <a href="{{c.cc}}">Course Contract</a>
                           </li>
                           <li>
                               <a href="{{c.wb}}">White Board</a>
                           </li>
                       </ul>
                   </div>
               </div> 
                <p>
                {{c.para}}
                </p>
<!--                Panels-->
        <dl class="tabs" data-tab>
        <dd class="active"><a href="#p1a">Study Sheets</a></dd>
        <dd><a href="#p1b">Study Sheets Answer Keys</a></dd>
        <dd><a href="#p1c">Graded Assignments</a></dd>
        <dd><a href="#p1d">Graded Assignment Answer Keys</a></dd>
      </dl>
      <div class="tabs-content">
        <div class="content active" id="p1a">
              <ul class="ss">
              <li><a href="{{c.ssu1}}">Study Sheet Unit One</a></li>
              <li><a href="{{c.ssu2}}">Study Sheet Unit Two</a></li>
              <li><a href="{{c.ssu3}}">Study Sheet Unit Three</a></li>
              <li><a href="{{c.ssu4}}">Study Sheet Unit Four</a></li>
              <li><a href="{{c.ssu5}}">Study Sheet Unit Five</a></li>

              </ul>
        </div>
        <div class="content" id="p1b">
          <ul class="ssa">
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1StudyKey/CCEng9S1StudyKeyU1.PDF">Study Sheet w/ Answers Unit One</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1StudyKey/CCEng9S1StudyKeyU2.PDF">Study Sheet w/ Answers Unit Two</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1StudyKey/CCEng9S1StudyKeyU3.PDF">Study Sheet w/ Answers Unit Three</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1StudyKey/CCEng9S1StudyKeyU4.PDF">Study Sheet w/ Answers Unit Four</a></li>
              

              </ul>
        </div>
        <div class="content" id="p1c">
          <ul class="ga">
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1Graded/CCEng9S1GradedU1.PDF">Graded Assignment Unit One</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1Graded/CCEng9S1GradedU2.PDF">Graded Assignment Unit Two</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1Graded/CCEng9S1GradedU3.PDF">Graded Assignment Unit Three</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1Graded/CCEng9S1GradedU4.PDF">Graded Assignment Unit Four</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEng9S1Final.PDF">Final Exam</a></li>
             

         </ul>
        </div>
        <div class="content" id="p1d">
          <ul class="gaa">
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1GradedKey/CCEng9S1GradedKeyU1.PDF">Graded Assignment w/ Answers Unit One</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1GradedKey/CCEng9S1GradedKeyU2.PDF">Graded Assignment w/ Answers Unit Two</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1GradedKey/CCEng9S1GradedKeyU3.PDF">Graded Assignment w/ Answers Unit Three</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1GradedKey/CCEng9S1GradedKeyU4.PDF">Graded Assignment w/ Answers Unit Four</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEng9S1FinalKey.PDF">Final Exam Key</a></li>
           

              </ul>
        </div>
      </div>       
            </div>  
        </div>
        </div>
  <a class="close-reveal-modal">&#215;</a>
</div>
            

         

Then, I have a controller and pretty sure it's not set up right. Ill need to get help from angular people most likely and if there are any on here that could help me with it it would be nice:

var oflApp = angular.module('oflApp', []);

oflApp.controller('oflClassCtrl', function ($scope) {
    
    
  $scope.classes = [
{"class": "ENGLISH I: INTRO TO LITERATURE AND COMPOSITION Sem 2", "href": "../courses/english.php#p1"},
{"class": "ENGLISH II: CRITICAL READING AND EFFECTIVE WRITING Sem 1"},
{"class": "ENGLISH II: CRITICAL READING AND EFFECTIVE WRITING Sem 2" },
{"class": "ENGLISH III: AMERICAN LITERATURE Sem 1" },
{"class": "ENGLISH III: AMERICAN LITERATURE Sem 2"},
{"class": "ENGLISH IV: BRITISH AND WORLD LITERATURE Sem 1"},
{"class": "ENGLISH IV: BRITISH AND WORLD LITERATURE Sem 2"},
{"class": "AP ENGLISH LANGUAGE AND COMPOSITION Sem 1"},
{"class": "AP ENGLISH LANGUAGE AND COMPOSITION Sem 2"},
{"class": "ENGLISH I: INTRO TO LIT & COMP LIT ADVANTAGE Sem 1"},
{"class": "ENGLISH I: INTRO TO LIT & COMP LIT ADVANTAGE Sem 2"},
{"class": "ENGLISH II: CRIT READING & EFFECTIVE WRITING LIT ADV Sem 1"},
{"class": "ENGLISH II: CRIT READING & EFFECTIVE WRITING LIT ADV Sem 2"},
{"class": "AP ENGLISH LITERATURE AND COMPOSITION Sem 1"},
{"class": "AP ENGLISH LITERATURE AND COMPOSITION Sem 2"},
{"class": "MULTICULTURAL STUDIES ALGEBRA 1 SEM 1"},
{"class": "ALGEBRA 1 SEM 2 "},
{"class": "GEOMETRY SEM 1 "},
{"class": "GEOMERTY SEM 2 "},
{"class": "ALGEBRA 1 SEM 1 "},
{"class": "ALGEBRA 1 SEM 2"},
{"class": "PRECALCULUS SEM 1"},
...
   
      
  ];
   
$scope.setClass = function(index) {
    $scope.selectedClass = $scope.classes[index];
        };    
     
});
            

         

also if you want to look at the live site, it's www.new.omegadesignla.com, any help would be great thanks!

angular reveal modal

So I'm wondering if I can simple use angular.js to display data into a modal reveal or if I need to use some module to enable angular to work with foundation reveal modal. Right now, i'm working on this search filter that needs to be clickable and display the reveal modal with the relavant course info. Here is my html with the angular and reveal modal:

<div class="row">
    <div class="small-12 columns">
      <div class="row">
          <div class="small-6 columns"><h1>Full Course Search</h1>
       <div>
      <label>Filter:</label>
      <input type="text" ng-model="searchTxt" placeholder="Enter a class here">
      <hr></div>
      </div>
       
<!--      <h1>Test {{searchTxt}}!</h1>-->
    </div>
 <table ng-controller="oflClassCtrl">
  <thead>
    <tr>
      <th>Course Title(Apex/Isis)</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat = "c in classes | filter:searchTxt">
        <td><a href="{{c.href}}"  ng-click="setClass($index)">{{c.class}}</a></td>
        
    </tr>
    
  
      
    
    
    
  </tbody>
  
</table>
    </div>
</div>
<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

<div id="myModal" class="reveal-modal" data-reveal>
  <div class="accordion accorborder" ng-controller="oflClassCtrl" data-accordion>
        <div class="accordion-navigation">
            <h3>{{c.class}} </h3>
            <div id="p1" class="content">
               <div class="row">
                   <div class="small-6 columns">
                        <h6>Code:</h6>{{c.code}}
                        <h6>Offerings:</h6>{{c.offerings}}
                   </div>
                   <div class="small-6 columns">
                       
                       <h6>Course Materials:</h6>
                       <ul>
                           <li>
                               <a href="{{c.syl}}">Syllabus</a>
                           </li>
                           <li>
                               <a href="{{c.cc}}">Course Contract</a>
                           </li>
                           <li>
                               <a href="{{c.wb}}">White Board</a>
                           </li>
                       </ul>
                   </div>
               </div> 
                <p>
                {{c.para}}
                </p>
<!--                Panels-->
        <dl class="tabs" data-tab>
        <dd class="active"><a href="#p1a">Study Sheets</a></dd>
        <dd><a href="#p1b">Study Sheets Answer Keys</a></dd>
        <dd><a href="#p1c">Graded Assignments</a></dd>
        <dd><a href="#p1d">Graded Assignment Answer Keys</a></dd>
      </dl>
      <div class="tabs-content">
        <div class="content active" id="p1a">
              <ul class="ss">
              <li><a href="{{c.ssu1}}">Study Sheet Unit One</a></li>
              <li><a href="{{c.ssu2}}">Study Sheet Unit Two</a></li>
              <li><a href="{{c.ssu3}}">Study Sheet Unit Three</a></li>
              <li><a href="{{c.ssu4}}">Study Sheet Unit Four</a></li>
              <li><a href="{{c.ssu5}}">Study Sheet Unit Five</a></li>

              </ul>
        </div>
        <div class="content" id="p1b">
          <ul class="ssa">
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1StudyKey/CCEng9S1StudyKeyU1.PDF">Study Sheet w/ Answers Unit One</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1StudyKey/CCEng9S1StudyKeyU2.PDF">Study Sheet w/ Answers Unit Two</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1StudyKey/CCEng9S1StudyKeyU3.PDF">Study Sheet w/ Answers Unit Three</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1StudyKey/CCEng9S1StudyKeyU4.PDF">Study Sheet w/ Answers Unit Four</a></li>
              

              </ul>
        </div>
        <div class="content" id="p1c">
          <ul class="ga">
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1Graded/CCEng9S1GradedU1.PDF">Graded Assignment Unit One</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1Graded/CCEng9S1GradedU2.PDF">Graded Assignment Unit Two</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1Graded/CCEng9S1GradedU3.PDF">Graded Assignment Unit Three</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1Graded/CCEng9S1GradedU4.PDF">Graded Assignment Unit Four</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEng9S1Final.PDF">Final Exam</a></li>
             

         </ul>
        </div>
        <div class="content" id="p1d">
          <ul class="gaa">
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1GradedKey/CCEng9S1GradedKeyU1.PDF">Graded Assignment w/ Answers Unit One</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1GradedKey/CCEng9S1GradedKeyU2.PDF">Graded Assignment w/ Answers Unit Two</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1GradedKey/CCEng9S1GradedKeyU3.PDF">Graded Assignment w/ Answers Unit Three</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEnglish9S1GradedKey/CCEng9S1GradedKeyU4.PDF">Graded Assignment w/ Answers Unit Four</a></li>
              <li><a href="/paperWork/English/CCEnglish9Sem1/CCEng9S1FinalKey.PDF">Final Exam Key</a></li>
           

              </ul>
        </div>
      </div>       
            </div>  
        </div>
        </div>
  <a class="close-reveal-modal">&#215;</a>
</div>
            

         

Then, I have a controller and pretty sure it's not set up right. Ill need to get help from angular people most likely and if there are any on here that could help me with it it would be nice:

var oflApp = angular.module('oflApp', []);

oflApp.controller('oflClassCtrl', function ($scope) {
    
    
  $scope.classes = [
{"class": "ENGLISH I: INTRO TO LITERATURE AND COMPOSITION Sem 2", "href": "../courses/english.php#p1"},
{"class": "ENGLISH II: CRITICAL READING AND EFFECTIVE WRITING Sem 1"},
{"class": "ENGLISH II: CRITICAL READING AND EFFECTIVE WRITING Sem 2" },
{"class": "ENGLISH III: AMERICAN LITERATURE Sem 1" },
{"class": "ENGLISH III: AMERICAN LITERATURE Sem 2"},
{"class": "ENGLISH IV: BRITISH AND WORLD LITERATURE Sem 1"},
{"class": "ENGLISH IV: BRITISH AND WORLD LITERATURE Sem 2"},
{"class": "AP ENGLISH LANGUAGE AND COMPOSITION Sem 1"},
{"class": "AP ENGLISH LANGUAGE AND COMPOSITION Sem 2"},
{"class": "ENGLISH I: INTRO TO LIT & COMP LIT ADVANTAGE Sem 1"},
{"class": "ENGLISH I: INTRO TO LIT & COMP LIT ADVANTAGE Sem 2"},
{"class": "ENGLISH II: CRIT READING & EFFECTIVE WRITING LIT ADV Sem 1"},
{"class": "ENGLISH II: CRIT READING & EFFECTIVE WRITING LIT ADV Sem 2"},
{"class": "AP ENGLISH LITERATURE AND COMPOSITION Sem 1"},
{"class": "AP ENGLISH LITERATURE AND COMPOSITION Sem 2"},
{"class": "MULTICULTURAL STUDIES ALGEBRA 1 SEM 1"},
{"class": "ALGEBRA 1 SEM 2 "},
{"class": "GEOMETRY SEM 1 "},
{"class": "GEOMERTY SEM 2 "},
{"class": "ALGEBRA 1 SEM 1 "},
{"class": "ALGEBRA 1 SEM 2"},
{"class": "PRECALCULUS SEM 1"},
...
   
      
  ];
   
$scope.setClass = function(index) {
    $scope.selectedClass = $scope.classes[index];
        };    
     
});
            

         

also if you want to look at the live site, it's www.new.omegadesignla.com, any help would be great thanks!

Rafi Benkual over 4 years ago

You can check out how these guys did theirs for an idea http://pineconellc.github.io/angular-foundation/

James Stone over 4 years ago

I agree with Rafi's suggestion.

It is possible to use the Foundation 5 Reveal Modal if you re-instantiate foundation in your directive's link function. Although this is possible, this really isn't a great solution imo.

Reflowing the DOM a la angular (or using other technologies) tends to break foundation js components unless you re-instantiate foundation post reflow.