ng-click 图像未在 owl 轮播滑块中调用温泉模板页面

Question

我有 owl 旋转木马滑块，正在调用 API 页面内容，点击时调用图像，
并且还使用 ng-click 图像调用温泉模板页面，但它仅适用于第一张图像，
在第二，第三......图像点击不调用那个温泉-ui模板页面。
这里是 java 脚本函数

function product_list(slug)
            {
                alert(slug);
//              $('.please_wait').show();

                $.ajax({
                    type: 'GET',
                    url: 'http://test.com/api/get_page/',
                    data: {slug: slug},
                    dataType: 'jsonp',
                    success: function (response)
                    {
                        alert(response);
                        var obj = JSON.stringify(response);
                        obj1 = JSON.parse(obj);                        
                        var title=obj1.page.title;
                        alert(title);                        
                        var content = obj1.page.content;
                        alert(content);
                        $('#' + slug).html(content);
//                        $('.please_wait').hide();
                    },
                    error: function () {

                    },
                });
            }

这是我的 css 代码

.please_wait {
                background: #fff url("img/loader.gif") no-repeat scroll center center;
                color: #ffffff;
                display: none;
                height: 100%;
                opacity: 0.7;
                position: fixed;
                text-align: center;
                vertical-align: middle;
                width: 100%;
                z-index: 9999;
            }
            #owl-demo .item{
                margin: 3px;
            }
            #owl-demo .item img{
                display: block;
                width: 100%;
                height: 300px;
            }
            @media (max-width:480px){
                .content img,.content iframe {
                    height: 200px;
                    width: 100% !important;
                }
            }
            @media (max-width:360px){
                .content img,.content iframe {
                    height: 180px;
                    width: 100%;
                }
            }

这是html代码

<div id="content" class="content">
                <div id="owl-demo">
                    <ul><li class="item"><img src="img/slides/slide1.jpg" alt="Owl Image" onclick="product_list('education');" ng-click="menu.setMainPage('education.html')"></li></ul>
                    <ul><li class="item"><img src="img/slides/slide2.jpg" alt="Owl Image" onclick="product_list('wealth');" ng-click="app.navi.pushPage('wealth.html')"></li></ul>
                    <ul><li class="item"><img src="img/slides/slide3.jpg" alt="Owl Image" onclick="product_list('education');" ng-click="menu.setMainPage('education.html')"></li></ul>
                    <ul><li class="item"><img src="img/slides/slide4.jpg" alt="Owl Image" onclick="product_list('education');" ng-click="menu.setMainPage('education.html')"></li></ul>
                    <ul><li class="item"><img src="img/slides/slide5.jpg" alt="Owl Image" onclick="product_list('health');" ng-click="menu.setMainPage('health.html')"></li></ul>
                    <ul><li class="item"><img src="img/slides/slide6.jpg" alt="Owl Image" onclick="product_list('urban');" ng-click="menu.setMainPage('urban.html')"></li></ul>
                    <ul><li class="item"><img src="img/slides/slide7.jpg" alt="Owl Image" onclick="product_list('urban');" ng-click="menu.setMainPage('urban.html')"></li></ul>                                
                </div>
            </div>
            <script>
                $("#owl-demo").owlCarousel({
                    autoPlay: 3000, //Set AutoPlay to 3 seconds
                    items: 1,
                    itemsDesktop: [1199, 3],
                    itemsDesktopSmall: [979, 3]
                });
                function reload() {
                    location.reload();
                }
            </script>

我想在图片点击时调用温泉页面，并使用 java 脚本从 api 传递页面内容。

谢谢。

Answer 1

<ons-navigator var="Navigator">
<div id="content" class="content">
                <div id="owl-demo">
                    <li class="item"><img src="img/slides/slide1.jpg" alt="Owl Image" onclick="product_list('health'); Navigator.pushPage('health.html');"></li>
                    <li class="item"><img src="img/slides/slide2.jpg" alt="Owl Image" onclick="product_list('wealth'); Navigator.pushPage('wealth.html');" ></li>
                    <li class="item"><img src="img/slides/slide3.jpg" alt="Owl Image" onclick="product_list('education'); Navigator.pushPage('education.html');"></li>
                    <li class="item"><img src="img/slides/slide4.jpg" alt="Owl Image" onclick="product_list('education'); Navigator.pushPage('education.html');">
                    <li class="item"><img src="img/slides/slide5.jpg" alt="Owl Image" onclick="product_list('health'); Navigator.pushPage('health.html');" ></li>
                    <li class="item"><img src="img/slides/slide6.jpg" alt="Owl Image" onclick="product_list('urban'); Navigator.pushPage('urban.html');" ></li>
                    <li class="item"><img src="img/slides/slide7.jpg" alt="Owl Image" onclick="product_list('urban'); Navigator.pushPage('urban.html');" ></li>                                
                </div>
            </div>         
    <script>
                    $("#owl-demo").owlCarousel({
                        autoPlay: 3000, //Set AutoPlay to 3 seconds
                        items: 1,
                        itemsDesktop: [1199, 3],
                        itemsDesktopSmall: [979, 3]
                    });
                    function reload() {
                        location.reload();
                    }
                </script>
    <ons-template id="education.html">
            <ons-page style="background-color: #FFFFCC;">
                <ons-toolbar>
                    <div class="left">
                        <ons-toolbar-button ng-click="menu.openMenu();">
                            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                        </ons-toolbar-button>
                    </div>
                    <div class="center">Education</div>
                </ons-toolbar>            

                <div id="education" class="content">
                    <div class="footer-text"><label>Copyright @ 2016</label></div>
                </div>            
            </ons-page>
        </ons-template>

使用 ons 导航器。

ng-click 图像未在 owl 轮播滑块中调用温泉模板页面

ng-click image not calling onsen template page in owl carousel slider

html

javascript

jquery

angularjs

onsen-ui