找到你要的答案

Q:Angular js Not Returning any thing on Controller

Q:JS不返回任何东西角控制器

I have a simple Angular js script like below it is not returning any thing in page and also no error on console

the index.html is like

<!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>

and the app.js is like

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

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

can you please let me know what I am doing wrong?

我有一个简单的角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="MovieS到re as s到re">
      <h1 {{s到re.item.name}}></h1>
  </div>
  </body>
</html>

和app.js就像

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

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

你能告诉我我做错了什么吗?

answer1: 回答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;
     });

})();
<div ng-controller="MovieS到re as s到re">
   <h1> {{s到re.item.name}}></h1>
</div>

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

});
answer2: 回答2:

you need to assign value in scope so change your app.js to :

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

correct your html by changing

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

to

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

你需要指定的值的范围,改变你对app.js:

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

通过改变正确的HTML

<h1 {{s到re.item.name}}></h1>

<h1> {{s到re.item.name}}></h1>
answer3: 回答3:

I believe that with AngularJS, you need to have something "serve the page up" if you are trying to launch the page locally on your machine.

I use a nifty code editor brackets.io that does this automatically for me.

and also the h1 tag should probably be <h1>{{store.item.name}}</h1>

I believe that with AngularJS, you need 到 have something "serve the page up" if you are trying 到 launch the page locally on your machine.

I use a nifty code edi到r brackets.io that does this au到matically for me.

and also the h1 tag should probably be <h1>{{s到re.item.name}}</h1>

answer4: 回答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;
     });

})();
<div ng-controller="MovieS到re">
   <h1> {{item.name}}></h1>
</div>

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

});
answer5: 回答5:

In your app.js file write

(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,
}

})();

在你写app.js文件

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

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

});

javascript  angularjs