如何获取skel / jQuery生成的HTML来检测angularJS指令?

时间:2015-08-04 22:24:39

标签: javascript jquery html angularjs jquery-mobile

我试图将我找到的一个很酷的模板(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"
        }
    };

}]);

0 个答案:

没有答案