angular.js 和 zurb foundation 显示模态

Question

感谢您抽出宝贵时间查看这个乱七八糟的新手question/post，并在我尝试寻求帮助时向您致以最诚挚的问候！

我正在尝试设置一个显示模式，以便在控制器中使用一些 angular.js link 来获取数据，但我遇到了麻烦！请记住，代码并不完整，但这是我正在尝试做的事情：

<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><td><a href="#" data-reveal-id="myModal" ng-click="setClass($index)">{{c.class}}</a></td></td>
    </tr>
  </tbody>

</table>
    </div>
</div>

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


...................ectt...........

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

然后，angular 控制器也没有 link 正确编辑我确定：

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"},
...ect....

  ];

$scope.setClass = function(index) {
    $scope.selectedClass = $scope.classes[index];
        };    

});

我该怎么做才能让它正常工作？最后，一个link到现场测试站点：http://new.omegadesignla.com/courses/classlist.php

Answer 1

我可以推荐使用 Angular Foundation's port for Foundation's Reveal, named Modal。

如果您不想使用它，您可以创建一个指令，包装 Foundation Reveal。一个例子：

directives.directive('notification', ['$timeout', function ($timeout) {
return {
  restrict: 'E',
  transclude: true,
  scope: {
    name: '@',
    header:'@',
    show: '=',
    timeout: '@?'
  },
  link: function(scope, element, attrs, controller, transclude) {
    transclude(scope, function(clone){
      scope.notification = clone.text();
    });
    scope.$watch('show', function (show) {
      if (show) {
        var reveal = angular.element('#' + scope.name);
        reveal.foundation();
        reveal.foundation('reveal', 'open');
        if (scope.timeout) {
          $timeout(function () {
            reveal.foundation('reveal', 'close');
          }, scope.timeout);
        }
        scope.show = false;
      }
    });
  },
  templateUrl: 'includes/notification.html'
};

这个'notification'可以加你HTML，喜欢：

<notification name="notificationName" header="Some header..." 
          show="showNotification" timeout="7000">
  Some text...
</notification>

Answer 2

你可以使用指令..

app.directive('modal', function() { return {
restrict: 'E',
scope: {
  show: '='
},
replace: true, // Replace with the template below
transclude: true, // we want to insert custom content inside the directive
link: function(scope, element, attrs) {
  scope.hideModal = function() {
    scope.show = false;
  };
},
template: "<div class='ng-modal' ng-show='show'>"+
            "<div class='reveal-modal' ng-show='show'>"+
              "<div ng-transclude></div>"+
              "<a class='close-reveal-modal' ng-click='hideModal()'>&#215;</a>"+
            "</div>"+
            "<div class='reveal-modal-bg' ng-click='hideModal()'></div>"+
          "</div>"};});

完整代码： codepen.io/whoisandie/pen/tFqhd

angular.js 和 zurb foundation 显示模态

angular.js and zurb foundation reveal modal

javascript

jquery

angularjs

zurb-reveal