Question

我是Angularjs的初学者。我正在通过观看视频来练习。我试过一个程序。

<!doctype html>
<html ng-app="store">
<head>
  <meta charset="UTF-8">
  <title>Example</title>

 </head>
<body >
    <div ng-Controller="StoreController as store">
        <h1>{{store.product.name}}</h1>
        <h2>{{store.product.price}}</h2>
        <p>{{store.product.lastname}}</p>
    </div>
  <script type="javascript" src="lib/angular.min.js"></script>
  <script src="lib/app.js" type="javascript"></script>

</body>
</html>

保存为＆＃39; index.html＆＃39; ＆安培;

(function(){
 var app= angular.module('store',[]);
app.controller('StoreController', function()
    {this.product = gem;}
    );
var gem = {
    name : 'Deco',
    price : 2.5,
    lastname : 'ANIL KUMAR',
}
})();

保存为app.js

但它没有显示仅显示

的数据

{{store.product.name}}
{{store.product.price}}
{{store.product.lastname}}

Answer 1

检查控制台日志中的错误。我看到至少一个错误，gem变量丢失，因为将来会调用控制器。在控制器内声明gem。

(function () {
    var app = angular.module('store', []);
    app.controller('StoreController', function () {
        var gem = {
            name: 'Deco',
            price: 2.5,
            lastname: 'ANIL KUMAR',
        }
        this.product = gem;
    });
})();

Answer 2

您必须将变量'gym'声明为控制器内的范围变量。请检查这个小提琴 http://jsfiddle.net/ashraffayad/pdbrds7m/

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

store.controller('StoreController', ['$scope', function (scope) {
    scope.gym = {
        name: 'Deco',
            price: 2.5,
            lastname: 'ANIL KUMAR'}
        }]);


<div ng-app="myApp" ng-Controller="StoreController">
        <h1>{{gym.name}}</h1>
        <h2>{{gym.price}}</h2>
        <p>{{gym.lastname}}</p>
    </div>

Answer 3

谢谢你们两个。这两个代码都是正确的。经过每一步的调试后，我终于找到了错误。

<div ng-Controller="StoreController as store">
        <input type="text" ng-model="name"></input> 
        <h1>{{store.product.name}}</h1>
        <h2>{{store.product.price}}</h2>
        <p>{{store.product.lastname}}</p>
    </div>
  <script src="lib/angular.min.js"></script>
  <script src="lib/app.js"></script>
 &

(function(){
 var app= angular.module('store',[]);
app.controller('StoreController', function()
    {this.product = gem;}
    );
var gem = {
    name : 'Deco',
    price : 2.5,
    lastname : 'ANIL KUMAR',
}
})();

现在正在运作。

＆＃39;在控制器中存储数据＆＃39;使用angularjs的应用程序

3 个答案: