Question

使用jQueryMobile和AngularJS，我开始了一个测试项目。对两者都是新手，并且对客户方面都是新手，期待专家的帮助......

在单页应用程序中，当我从mainPage导航时（有3个listItems作为Row1，Row2和Row3（来自$$ scope.rowDataArray的数据），它会根据来自的值呈现带有绿色和红色的彩色按钮的页面。控制器的$ scope.billTblModel.rows通过DIRECTIVE-Template

在第一次导航期间，即从mainPage到ButtonPage，它很好地呈现按钮作为JQuery方式的含义，它有圆角，数据主题等，但是，当我回到主页并重做相同的导航时，BUTTONS丢失它是jQMobile类型的渲染，并成为模板指令定义的微小简单按钮。

请帮我渲染按钮无论是JQueryMobile方式还是AngulajS（模板指令）方式

有关代码，请参阅PLUNKER 链接：http://plnkr.co/edit/s7h3SNMyu877kB7vFbzV?p=preview

代码段如下： HTML :(指令基金评级与控制器的数据）

<div data-role="page" id="dashBoardPageId">
   <div data-role="content"  id="dashBoardIdIdContent" >        
    <div fundoo-rating row-item-index="listItemIndex" rating-value="rating" on-rating-selected="saveRatingToServer(rating, ratingTextVal)" item-data="billTblModel" >
    </div>
  </div>
</div>

/ ---------------------------- 指令如下：

.directive('fundooRating', function ()
{

    return{
          restrict: 'A',
          template:     '<div>'+
                        '<ul  data-role="listview">' +
                          '<li id="listViewId" ng-repeat="star in stars" ng-click="toggle($index)">' +                          
                            '<span ng-if="star.filled==true" > '+
                                '<div data-role="button" data-theme="c" style="background-color:#5CE65C; border: 1px solid #000000;">{{star.btnTitle}}</button>' +
                                '</div>'+
                            '</span>'+
                            '<span ng-if="star.filled==false" > '+
                                '<button data-theme="e" style="background-color:#FF6666; border: 1px solid #000000;" >{{star.btnTitle}}</button>' +
                            '</span>'+                        
                          '</li>' +
                        '</ul>'+                    
                    '</div>',


        scope: {
            rowItemIndex: '=',
            ratingValue: '=',
            readonly: '@',
            onRatingSelected: '&',
            itemData: '=',      
        },

        link: function (scope, elem, attrs)
        {
                 ....scope.toggle = function(index){}
                 scope.$watch('ratingValue', function( newVal, oldVal) {
                    console.log("### ratingValue >>>OldVal: "+JSON.stringify(oldVal) +" " + "newVal: "+JSON.stringify(newVal));
                  if (newVal!= oldVal) {                    
                    updateStars();
                  }
                  //setTimeout(function(){$scope.$on('$viewContentLoaded', elem.trigger("create"))},1);
                });
                }

使用AngularJS按钮的JQuery Mobile无法正确呈现

0 个答案: