2017-03-02 6 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タグの属性 'ID' をコンパイルしていないので、私たちはすべてのスタイルを適用することはできませんそれに属性 'class'を適用することができます

0

5月?

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

OR

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

あなたの答えはES6に基づいていると言わなければならないと思います – Ladmerc

+0

@Ladmerc opss、habits:Dはes5に更新されました – sbaaaang

関連する問題