2016-06-22 10 views
-1

をロードしない:https://jsfiddle.net/alexsuch/6aG4x/シンプルな角度アプリケーションを実行しようとすると、しかし、角度が、私はローカルでこの角度アプリを実行しようとしています

私はindex.htmlを、とapp.jsを作成し、各ファイルにそれぞれのコードをコピー。 htmlファイルに追加しました。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> 
<script src= "app.js" type="text/javascript"></script> 

私は、アプリケーションを読み込むためにコンソールからhttp-serverを実行しています。 localhost:8080にアクセスすると、{{content}}が表示されるので、角度が読み込まれていないことがわかります。ここで

は、私が何をしないのです、私のファイル...

index.htmlを

<!DOCTYPE html> 
<html ng-app='store'> 
<body> 

<div ng-controller="MainCtrl" class="container"> 
    <h1>Select text file</h1> 
    <input type="file" on-read-file="showContent($fileContent)" /> 
    <div ng-if="content"> 
     <h2>File content is:</h2> 
     <pre>{{ content }}</pre> 
    </div> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> 
<script src= "app.js" type="text/javascript"></script> 
</body> 

app.js

var myapp = angular.module('myapp', []); 

myapp.controller('MainCtrl', function ($scope) { 
    $scope.showContent = function($fileContent){ 
     $scope.content = $fileContent; 
    }; 
    }); 

myapp.directive('onReadFile', function ($parse) { 
    return { 
     restrict: 'A', 
     scope: false, 
     link: function(scope, element, attrs) { 
      var fn = $parse(attrs.onReadFile); 

      element.on('change', function(onChangeEvent) { 
       var reader = new FileReader(); 

       reader.onload = function(onLoadEvent) { 
        scope.$apply(function() { 
         fn(scope, {$fileContent:onLoadEvent.target.result}); 
        }); 
       }; 

       reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]); 
      }); 
     } 
    }; 
}); 

ですか?あなたが名前のモジュールブートストラップです

+0

基本的なデバッグをしましたか?コンソールを開くと、それは*なぜ*あなたに伝えます。 – dfsq

+0

ファイルを置いてもらえますか? –

+0

@dfspはい、クロムインスペクタを開いてエラーがスローされていません – Lumbee

答えて

2

:この<html ng-app='store'>

との「ストア」はstoremyappの名前を変更するには、このラインはあなたの角度アプリの名前が間違っていると、HTMLとJavaScriptで異なっているangular.module('myapp', []);

+0

ブーム!あなたはそれをくそった!魅力的な作品。ありがとうございました。 – Lumbee

1

です。 ng-appディレクティブとangular.module('', [])ディレクティブの間で一貫している必要があります。アプリを動作させるために、以下のように変更します。https://jsbin.com/geyidot/1/edit?html,js,console,output

:JavaScriptで

変更をHTML

<html ng-app='myapp'> 

var myapp = angular.module('store', []); 

変更は、ここでは同じの作業のデモを参照してください。

関連する問題