黑咕隆咚小Gee
黑咕隆咚小Gee
  • 发布:2014-11-28 16:19
  • 更新:2015-02-04 23:33
  • 阅读:2879

angular js + MUI遇到的问题

分类:MUI

在angular js里添加MUI的一些组件会无效果。好比如:
index.html里定义好angular js的框架:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="format-detection" content="telephone=no" />  
    <meta name="msapplication-tap-highlight" content="no" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
    <!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />-->  
    <link href="css/mui.min.css" rel="stylesheet" type="text/css"/>  
    <link href="css/index.css" rel="stylesheet" type="text/css"/>  
    <link href="css/kxcFilter.css" rel="stylesheet" type="text/css"/>      
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>          
    <script type="text/javascript" src="publicJS/angular.min.js"  ></script>  
    <script type="text/javascript" src="publicJS/angular-route.min.js" ></script>  
    <script type="text/javascript" src="publicJS/mui.js"></script>  
   <script type="text/javascript">  
            mui.init();  
    </script>     
</head>  

<body class="body-background">  
    <div id="appVC" class="page-container" ng-controller='appController'>  
        <div ng-view></div>  
    </div>    
</body>  
</html>  

在我的一个子页面:find.html添加一个可拖动选项卡的组件:

<div id="slider" class="mui-slider">  
    <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
        <a class="mui-control-item" href="">待办公文</a>  
        <a class="mui-control-item" href="">已办公文</a>  
        <a class="mui-control-item" href="">全部公文</a>          
    </div>  
    <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>  
    <div class="mui-slider-group">  
        <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
            <ul class="mui-table-view">  
                <li class="mui-table-view-cell">  
                    第一个选项卡子项-1  
                </li>  
                <li class="mui-table-view-cell">  
                    第一个选项卡子项-2  
                </li>  
                <li class="mui-table-view-cell">  
                    第一个选项卡子项-3  
                </li>  
                <li class="mui-table-view-cell">  
                    第一个选项卡子项-4  
                </li>  
                <li class="mui-table-view-cell">  
                    第一个选项卡子项-5  
                </li>  
            </ul>  
        </div>  
        <div id="item2mobile" class="mui-slider-item mui-control-content"></div>  
        <div id="item3mobile" class="mui-slider-item mui-control-content"></div>  
    </div>  
</div>

结果完全没有效果?无法拖动!
针对这种情况,有没有解决方法?

2014-11-28 16:19 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

如果你的这个选项卡是动态添加的。也就是用angular的模板动态渲染的。需要你自己手动调用一下slider插件来初始化。
当angular的模板渲染完之后,调用mui('#slider').slider();方法来初始化可拖拽选项卡

我叫王大锤

我叫王大锤

都用到了这个份上了,为毛不用ionic的ui?

诸葛囧明

诸葛囧明

mui.init(); 应该写在angular的项目文件当中,而且要异步加载

  • Miaosem

    mui.init(); 怎么异步加载?

    2016-01-16 22:10

该问题目前已经被锁定, 无法添加新回复