我正在使用rails 4 + Foundation 5和angularjs编写一个web应用程序，我的目标是在我加载第二个ui-view(获得索引和主)时创建一个off-canvas侧边栏，问题是，当我从索引视图来时，off-canvas从未工作过，但当我重新加载页面时(F5):它工作得很好，无论我放在href或甚至ui-sref上下面是代码
.config([
"$stateProvider",
"$urlRouterProvider",
function($stateProvider, $urlRouterProvider){
$stateProvider
.state('index', {
url: '/index',
templateUrl: '/index.html',
controller: 'IndexCtrl'
})
.state('mainPage', {
url: '/main',
templateUrl: '/main.html',
controller: 'MainCtrl'
})
$urlRouterProvider.otherwise('index')
}])<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A title</title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "vendor/modernizr" %>
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body ng-app="ubciManager">
<ui-view></ui-view>
<script type="text/ng-template" id="/index.html">
<div class="row" id="contentWrapper">
<div class="small-12 columns">
<div class="large-12 columns show-for-large-only">
<br /><br /><br /><br /><br /><br /><br />
</div>
<div >
<div class='row'>
<div class="small-12 small-centred columns" id="page-header">
<h3>Very long and boring title</h3>
</div>
</div>
<div class="row">
<div class="small-12 small-centred columns" id='viewWrapper'>
<form ng-submit="connect()">
<div class="row">
<div class="small-12 columns" >
<br />
<p>To get informations about any device on your network, please make sure SNMP is activted and configured before filling this form.</p>
</div>
</div>
<div class="row">
<div class="large-4 columns" >
<label>
Adresse
<input type="text"
placeholder="Adresse IP"
ng-model="hwAddr" />
</label>
</div>
<div class="large-4 columns" >
<label>
Community
<input type="text"
placeholder="Community"
ng-model="community" />
</label>
</div>
<div class="large-4 columns">
<label>
Password
<div class="row collapse">
<div class="small-10 large-9 columns">
<input type="password"
ng-model="password" />
</div>
<div class="small-2 large-3 columns">
<input type="submit" value="Go" class="button postfix"></input>
</div>
</label>
</div>
</div>
</div>
<!--<small class="error" id="errorMsg">Invalid entry</small> -->
</from>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/ng-template" id="/main.html">
<div id="mainWrapper">
<nav class="top-bar foundation-bar" data-topbar="">
<ul class="title-area">
<li class="name">
<span class="has-tip" data-tooltop="">
<h1>{{deviceType}}</h1>
</span>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a target="_blank">Log Out</a></li>
</ul>
</section>
</nav>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle"
>Menu</a>
<!-- Off Canvas Menu -->
<nav class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li><a href="#">The Psychohistorians</a></li>
<li><a href="#">The Encyclopedists</a></li>
<li><a href="#">The Mayors</a></li>
<li><a href="#">The Traders</a></li>
<li><a href="#">The Merchant Princes</a></li>
</ul>
</nav>
<!-- main content goes here -->
<div class="mainContent">
<p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.</p>
</div>
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
</div>
</script>
</body>
</html>我通过使用作用域函数解决了这个问题，并在内部强制off-canvas事件，这些函数通过html中的angular ng-click选项调用，事件记录在off-canvas页面末尾的foundation 5中(我第一次错过了它们…)