的index.html

Question

我正在尝试在本地运行此角度应用：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]);
            });
        }
    };
});

我错过了什么？

Answer 1

你是一个名为：＆＃39; store＆＃39;使用此<html ng-app='store'>

将myapp重命名为store，此行angular.module('myapp', []);

Answer 2

您的角度应用的名称不正确，并且在HTML和JavaScript方面有所不同。它应该在ng-app指令和angular.module('', [])声明之间保持一致。将其更改为如下以使应用程序正常工作：

JavaScript更改

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

HTML更改

<html ng-app='myapp'>

请参阅此处的相同工作演示：https://jsbin.com/geyidot/1/edit?html,js,console,output

试图运行一个简单的角应用程序，但角度不加载

的index.html

app.js

2 个答案: