Question

我有一个简单的Angular js脚本，如下所示，它不会返回页面中的任何内容，也不会在控制台上出错

index.html就像

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <title>Angular Starting</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://code.angularjs.org/1.4.4/angular.min.js"></script>
    <script src="app.js"></script>
  <div ng-controller="MovieStore as store">
      <h1 {{store.item.name}}></h1>
  </div>
  </body>
</html>

和app.js就像

(function(){
    var app = angular.module('myApp', []);
    app.controller('MovieStore', function(){
        this.item = movies;
     });

    var movies ={
        name :'Cinema Paradiso',
        price: 333,
    }
})();

你可以告诉我我做错了吗？

Answer 1

<div ng-controller="MovieStore as store">
   <h1> {{store.item.name}}></h1>
</div>

(function(){
    var app = angular.module('myApp', []);
    app.controller('MovieStore', function($scope){
        var movies ={
          name :'Cinema Paradiso',
          price: 333,
        };
        $scope.item = movies;
     });

})();

Answer 2

您需要在范围内指定值，因此请将app.js更改为：

(function(){
    var app = angular.module('myApp', []);
    app.controller('MovieStore', function(){
        var movies = {
            name :'Cinema Paradiso',
            price: 333,
        }
        this.item = movies;
     });
})();

通过更改

来更正您的HTML

<h1 {{store.item.name}}></h1>

到

<h1> {{store.item.name}}></h1>

Answer 3

我相信，对于AngularJS，如果您尝试在计算机上本地启动页面，则需要“提供页面服务”。

我使用了一个漂亮的代码编辑器brackets.io来自动执行此操作。

以及h1标记应该是<h1>{{store.item.name}}</h1>

Answer 4

<div ng-controller="MovieStore">
   <h1> {{item.name}}></h1>
</div>

(function(){
    var app = angular.module('myApp', []);
    app.controller('MovieStore', function(){
        var movies ={
          name :'Cinema Paradiso',
          price: 333,
        };
        this.item = movies;
     });

})();

Answer 5

在你的app.js文件中写

(function(){
    var app = angular.module('myApp', []);
    app.controller('MovieStore', function(){
        var item=this; //please write this line and check it
        this.item = movies;
     });

var movies ={
    name :'Cinema Paradiso',
    price: 333,
}

}）（）;

Angular js在Controller上没有返回任何东西

5 个答案: