angular.js 및 zurb 재단 모달 공개

Question

이 newbish jubmled 최대 질문/게시물 jubmled 귀하의 시간을 주셔서 감사하고 가장 친절한 도움을 요청하는 동안 부탁드립니다!

컨트롤러에 데이터를 연결하는 일부 angular.js와 함께 삭제 모드를 설정하려고하는데 문제가 있습니다. 코드가 여기에 완료되지 않은,하지만 명심하는 것이 내가 할 시도하고있는 무슨이다 :

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

을 그리고, 각 컨트롤러도 제대로 확인 메신저 연결되지 :

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]; 
     };  

}); 

내가 무엇을 할 수 제대로 작동하려면? 마지막으로 라이브 테스트 사이트 링크 : http://new.omegadesignla.com/courses/classlist.php

Answer 1

님의 포트를 Foundation의 Reveal에 사용하는 것이 좋습니다 (이름은 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' 
}; 

이 '알림'처럼, 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