我试图将我找到的一个很酷的模板(http://templated.co/monochromed)改编成一个AngularJS单页应用。该模板具有响应式UI,可以很好地适应移动设备,但它使用skel和jQuery。我对jQuery并不太熟悉,但是我遇到了一个问题,即它为移动设备生成的html没有选择ng-click指令。是否有可能获得角度指令在这里工作?
我的导航栏:
<nav id="nav">
<ul>
<li ng-class="{active: tab === 'home'}"><a ng-click="tab = 'home'" href="#">Home</a></li>
<li ng-class="{active: tab === 'about_us'}"><a ng-click="tab = 'about_us'" href="#">About Us</a></li>
<li ng-class="{active: tab === 'blog'}"><a ng-click="tab = 'blog'" href="#">Blog</a></li>
<li ng-class="{active: tab === 'events'}"><a ng-click="tab = 'events'" href="#">Events</a></li>
<li ng-class="{active: tab === 'podcast'}"><a ng-click="tab = 'podcast'" href="#">Podcast</a></li>
</ul>
</nav>
skel为移动设备生成的内容:
<nav>
<a class="link depth-0" href="#" style="cursor: pointer; display: block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<span class="indent-0"></span>Home
</a>
<a class="link depth-0" href="#" style="cursor: pointer; display: block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<span class="indent-0"></span>About Us
</a>
<a class="link depth-0" href="#" style="cursor: pointer; display: block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<span class="indent-0"></span>Blog
</a>
<a class="link depth-0" href="#" style="cursor: pointer; display: block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<span class="indent-0"></span>Events
</a>
<a class="link depth-0" href="#" style="cursor: pointer; display: block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<span class="indent-0"></span>Podcast
</a>
</nav>
相关的skel.init:
navPanel: {
breakpoints: 'mobile',
position: 'left',
style: 'reveal',
size: '80%',
html: '<div data-action="navList" data-args="nav"></div>'
}
角度控制器:
angular.module('mainApp',[])
.controller('navCtrl', ["$scope", function($scope) {
$scope.tab = 'home';
$scope.pages = {
home: {
url: "home.html"
},
about_us: {
url: "about_us.html"
},
blog: {
url: "blog.html"
},
events: {
url: "events.html"
},
podcast: {
url: "podcast.html"
}
};
}]);