角度ng-view中的Javascript
[英]Javascript in angular ng-view
問題描述
這可能有點可讀，但我認為如果沒有上下文，這將相當混亂。 現在，我有一個站點，它的角度在所有頁面上保持相同的標題，只是包含一個ng-view來加載特定頁面的內容。 我的index.html文件看起來像這樣
<!DOCTYPE html>
<html lang="en">
<!-- MY HEADER -->
<div class="ng-view"></div>
<!-- MY FOOTER -->
<!-- Angular scripts -->
<script src="js/angular/angular.min.js"></script>
<script src="js/angular-route/angular-route.min.js"></script>
<!-- Angular app script -->
<script src="js/app.js"></script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- MY JAVASCRIPT-->
<script src="js/filter.js"></script>
</html>
在我的一種觀點中，我試圖設置一個表格過濾器（根據年份過濾錦標賽列表）。 該視圖文件名為archives.html，當前看起來像：
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div align="center">
<div class="btn-group">
<button type="button" class="btn btn-filter" data-target="2016">2016</button>
<button type="button" class="btn btn-filter" data-target="2015">2015</button>
<button type="button" class="btn btn-filter" data-target="2014">2014</button>
</div>
</div>
<br>
<div class="table-responsive">
<table class="table table-filter table-hover">
<thead class="thead-inverse">
<tr>
<th>Tournament</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr data-status="2016">
<td>Capilano Junior</td>
<td><a href="http://bcgazone4.bluegolf.com/bluegolf/bcgazonefour16/event/bcgazonefour165/leaderboard.htm">Results</a></td>
</tr>
<tr data-status="2015">
<td>Point Grey Junior</td>
<td><a href="http://bcgazone4.bluegolf.com/bluegolf/bcgazonefour16/event/bcgazonefour1611/leaderboard.htm">Results</a></td>
</tr>
<tr data-status="2014">
<td>Shaughnessy Junior</td>
<td><a href="http://bcgazone4.bluegolf.com/bluegolf/bcgazonefour14/event/bcgazonefour144/leaderboard.htm">Results</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
最后是js / filter.js中的javascript代碼：
$(document).ready(function () {
$('.btn-filter').on('click', function () {
var $target = $(this).data('target');
if ($target != 'all') {
$('tbody tr').css('display', 'none');
$('tbody tr[data-status="' + $target + '"]').fadeIn('slow');
} else {
$('tbody tr').css('display', 'none').fadeIn('slow');
}
});
});
我假設對每個單獨的視圖都按角度加載了index.html文件中包含的所有腳本，因此在filter.js中，archives.html視圖中的表將被成功定位。 但是，過濾器沒有任何反應。 我在這個假設中是錯誤的，還是我對javascript的其他部分不注意？
3 個解決方案
解決方案1
0 2016-11-21 00:14:43
您現在有兩個問題。 首先，您使用id =“ btn_filter”聲明了按鈕，因此事件監聽器應與“ ＃ ”綁定
$('#btn-filter').on('click', function () {});
其次，“ id”對於每個DOM元素應該是唯一的，並且不應像您一樣重復。
編輯：根據問題的編輯，有一個錯字，帶有class="btn_filter"和$('.btn-filter')用下划線代替下划線。
編輯：另一個問題是$('.tbody tr[data-status="' + $target + '"]')用tbody替換.tbody
解決方案2
0 2016-11-21 00:23:36
您能告訴我們控制台日志輸出嗎？ 也許我們可以為您提供更多信息。 您只需要按F12並在控制台中單擊即可。
您可以查看這篇有關角度過濾和排序的文章。
https://scotch.io/tutorials/sort-and-filter-a-table-using-angular
您可以在互聯網上為此目的尋找一些圖書館。 https://github.com/mattiash/angular-tablesort
該庫似乎易於使用。
在我看來，問題將是庫和angular之間的任何不兼容，但是如果沒有日志，我無法確定。 嘗試兩個鏈接並注釋結果！
祝好運！
解決方案3
0 2016-11-21 19:43:11
通過在app.js內專門為我的視圖設置一個控制器，然后通過ng-click調用我在控制器中定義的函數來觸發工作按鈕，從而觸發javascript。 控制台日志現在可以正常工作，因為我認為在成功加載視圖之前嘗試訪問元素是一個問題。 感謝所有提供幫助的人。
來自archives.html的摘錄
<div align="center">
<div class="btn-group">
<button type="button" class="btn btn-primary" id="btn2016" ng-click="toggle_year(2016)">2016</button>
<button type="button" class="btn btn-primary" id="btn2015" ng-click="toggle_year(2015)">2015</button>
<button type="button" class="btn btn-primary" id="btn2014" ng-click="toggle_year(2014)">2014</button>
<button type="button" class="btn btn-primary" id="btn2013" ng-click="toggle_year(2013)">2013</button>
<button type="button" class="btn btn-primary" id="btn2012" ng-click="toggle_year(2012)">2012</button>
<button type="button" class="btn btn-primary" id="btn2011" ng-click="toggle_year(2011)">2011</button>
<button type="button" class="btn btn-primary" id="btn2010" ng-click="toggle_year(2010)">2010</button>
</div>
</div>
App.js：
var app = angular.module('zone_4_app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/archives.html',
controller: 'archiveController'
})
// A bunch of other routing
});
app.controller('archiveController', ['$scope', function($scope) {
$scope.toggle_year = function(year) {
console.log('filter button clicked: ' + year);
var $target = year;
var $btn = '#btn' + year;
if ($target != 'all') {
$('.btn-primary').each(function () {
$(this).removeClass('active');
});
$('tbody tr').css('display', 'none');
$('tbody tr[data-status="' + $target + '"]').fadeIn('slow');
$($btn).addClass('active');
console.log('printing out results of year: ' + year);
} else {
$('tbody tr').css('display', 'none').fadeIn('slow');
console.log('no results');
}
}
}]）;
ng-view在Angular中不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.