0

html - angularJS/ionicでスコープを表示しようとしています タイトルをWebページに表示しようとしていますが、何も表示されません。私は角度とイオンの枠組みにはかなり新しいです。誰かが私が間違っていることを指摘できれば、それはトンを助けるでしょう!
html - angularJS/ionicにスコープを表示しようとしています

angular.module('MyApp', []) 

.controller('TodoCtrls', function($scope) { 


    $scope.tasks = [ 
    { title: 'Collect coins' }, 
    { title: 'Eat mushrooms' }, 
    { title: 'Get high enough to grab the flag' }, 
    { title: 'Find the Princess' } 
    ]; 
}) 

そして、私のhtml:

<html ng-app="MyApp"> 

<ion-header> 
    <ion-navbar> 
    <ion-title>Courses</ion-title> 
     <h1 class="title">Todo</h1> 
    </ion-navbar> 
</ion-header> 

<script src="TodoCtrl.js"></script> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 



<body ng-app="MyApp" ng-controller="TodoCtrls"> 
    <ion-content> 
    <ion-list> 
     <ion-item ng-repeat="task in tasks"> 
     <h1>{{task.title}}</h1><br> 
     </ion-item> 
    </ion-list> 
    </ion-content> 
</body> 

</html> 
+0

それを稼働させましたか? :) –

答えて

0

ようこそSOへ

は、ここに私のコントローラのjsです。あなたのコードは基本的には良いですが、2つの問題があります。

  1. ion-headerタグは、私はあなただけのテストのために、このファイルにangular.min.js含めていると仮定してい
  2. body要素内にある必要があります、あなたは何か空想的なものを必要としません。しかし、スクリプトは正しい順序でロードする必要があります。閉じた</body>タグの直前に配置し、コントローラの前にAngularがロードされるように順序を切り替えます。

となると、change this in your example, it seems to workとなる。 Ionicはどこにも含まれていないので、もちろんスタイリングは得られませんが、リストはレンダリングされます。

+0

だから私はそれを変更し、まだ何も表示されていない。あなたは私にコードのスニペットを送ることができる方法はありますか? –

+0

確か@KateWatkins http://embed.plnkr.co/AdJY6wBCQszF6HRgOtyz/ –

関連する問題