Javascript 角度简单视图未加载控制器内容_Javascript_Angularjs

Javascript 角度简单视图未加载控制器内容

javascript angularjs

Javascript 角度简单视图未加载控制器内容,javascript,angularjs,Javascript,Angularjs,我在scripts.js中编写了以下Angular脚本： // defining a Module var myApp = angular.module("myApp", []); // defining a controller as the child of the above module myApp.controller("myController", function($scope){ $scope.authors = [ { author : "Jack

我在scripts.js中编写了以下Angular脚本：

// defining a Module
var myApp = angular.module("myApp", []);


// defining a controller as the child of the above module
myApp.controller("myController", function($scope){
    $scope.authors = [
        { author : "Jack London", book : 'Martin Eden'},
        { author : "Thomas Hardy", book : 'Jude, the Obscure'},
        { author : "Emile Zola", book : 'Germinal'},
    ];

    $scope.addNewAuthor = function(){
        $scope.authors.push = function(){
           author : $scope.newAuthor.name,
           book : $scope.newAuthor.book,
        },
    };
});

然后我编写了这个HTML视图：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title></title>
    <script type="text/javascript" src="angular.js" ></script>
    <script type="text/javascript" src="scripts.js" ></script>
</head>
<body >
    <h1>Hello</h1>
    <div data-ng-controller="myController">
        <ul data-ng-repeat="single in authors">
           Author {{ single.author }} has written {{ author.book }}
        </ul>
    </div>
</body>
</html>

实际上，您的javascript是错误的。这不是将项目推入

数组的方法，推送必须用作一种功能：
 var myApp = angular.module("myApp", []);
// defining a controller as the child of the above module
myApp.controller("myController", function($scope){
    $scope.authors = [
        { author : "Jack London", book : 'Martin Eden'},
        { author : "Thomas Hardy", book : 'Jude, the Obscure'},
        { author : "Emile Zola", book : 'Germinal'},
    ];

    $scope.addNewAuthor = function(){
        $scope.authors.push({
           author : $scope.newAuthor.name,
           book : $scope.newAuthor.book,
        });
    };
});

此外，您的HTML中有一个输入错误，您使用了author.book而不是single.book：
<body ng-app="myApp">
    <h1>Hello</h1>
    <div data-ng-controller="myController">
        <ul data-ng-repeat="single in authors">
           Author {{ single.author }} has written {{ single.book }}
        </ul>
    </div>
</body>


你好

作者{{single.Author}}写了{{single.book}

Ok，我甚至删除了push部分，但它仍然无法正确加载..当我在ff中通过代码检查检查文件时，我看到.js文件已正确加载！我通常把ng应用程序放在身体上而不是html上，但我不知道有什么区别。如果解决了你的问题，请考虑接受答案。
<body ng-app="myApp">
    <h1>Hello</h1>
    <div data-ng-controller="myController">
        <ul data-ng-repeat="single in authors">
           Author {{ single.author }} has written {{ single.book }}
        </ul>
    </div>
</body>