[英]angular.js and zurb foundation reveal modal
感謝您抽出寶貴時間查看這個新的問題/帖子,並在我嘗試獲得幫助時向您致以最誠摯的問候!
我試圖設置一個揭示模式下拉與控制器中的一些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">×</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
我可以推薦使用Angular Foundation的Foundation for Foundation's 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>
你可以使用指令..
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()'>×</a>"+
"</div>"+
"<div class='reveal-modal-bg' ng-click='hideModal()'></div>"+
"</div>"};});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.