2017-03-02 18 views
0

夥計!在我的離子項目中,我可以通過點擊按鈕打開模式窗口。這個模式的數據從$ scope.article動態加載。在HTML綁定塊中未應用類?

查看模板:

<script id="modal.html" type="text/ng-template"> 
    <ion-modal-view ng-style="{'max-width': '100%', 
     'bottom': '0px', 'left': '0px', 'margin': 'auto', 
     'position': 'fixed', 
     'right': '0px', 
     'top': '0px', 'width': '100%'}"> 
    <ion-content style="background:url(img/weather-background.jpg) no-repeat; background-size:100%;"> 
     <div ng-click="closeModal()" style="z-index:999;color:#000;margin:10px 0 0 10px; position: absolute"> 
     <div style="width:100%;"> 
      <i class="ion-close-round"></i> 
     </div> 
     <div style="width:100%;" ng-bind-html="article.modal_content"></div> 
     </div> 
    </ion-content> 
    </ion-modal-view> 
</script> 

所有的HTML數據正確applys,但模板類不適用於此。

這是我的控制器:

.controller('ArticleCtrl',function($scope, ContentFac, $state,$ionicLoading,$ionicModal){ 
    $scope.article = {}; 
    $ionicLoading.show({ 
    template: '<ion-spinner icon="android"></ion-spinner>' 
    }); 
    $scope.openModal = function(template){ 
    $ionicModal.fromTemplateUrl(template, { 
     scope: $scope, 
     animation: 'slide-in-up', 
    }).then(function(modal) { 
     $scope.modal = modal; 
     $scope.modal.show(); 
    }) 
    }; 
    $scope.closeModal = function() { 
    $scope.modal.hide(); 
    }; 
    // Cleanup the modal when we're done with it! 
    $scope.$on('$destroy', function() { 
    $scope.modal.remove(); 
    }); 

    $scope.$on('$ionicView.loaded',function(){ 
    ContentFac.getArticle($state.params.item).then(function(data){ 
     $scope.$broadcast('fadeContent'); 
     console.log(data); 
     $scope.article = data; 
     // $ionicLoading.hide(); 
    }) 
    }); 
    $scope.gotoLink = function(url){ 
    window.open(url,'_system'); 
    } 
}) 

例如,我曾在另一種觀點認爲,在HTML數據直接插在模板中,這種方式適用所有的模板類相同的模式。 問題是什麼?謝謝!

回答

0

的問題是,NG綁定,HTML無法編譯標籤的屬性「身份證」,所以我們不能套用任何風格可以應用屬性'class'

0

可能是?

$scope.$apply(function() { 
$scope.article = data; 
}); 

或者(如果$消化正在進行中)

$scope.$evalAsync(function() { 
    $scope.article = data; 
}); 
+0

我想你應該提到你的答案是基於ES6 – Ladmerc

+0

@Ladmerc opss,習慣:D更新爲es5 – sbaaaang