2015-02-26 2 views
2

Я новичок в AngularJS. Я просто попробовал это с Code School. Вот мой код. Контроллер не выполняется. Где моя ошибка?Контроллер AngularJS не исполняется

Вот HTML файл

<html ng-app="store"> 
<head> 
<title>Demo</title> 
<script type="text/javascript" src="js/angular.min.js"></script> 
<script type="text/javascript" src="js/app.js"></script> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
</head> 
<body> 
<div ng-controller="StoreController as store"> 
    <h1> {{store.product.name}} </h1> 
    <h2> $ {{store.product.price}} </h2> 
    <p> {{store.product.description}} </p> 
</div> 
<div> 
</div> 
</body> 
</html> 

Вот app.js файл

(function(){ 
    var app = angular.module('store', [ ]); 
    app.controller('StoreController', function(){ 
    this.product = gem; 
    }); 

    var gem = { 
    name: 'Dodecahedron', 
    price: 2.95, 
    description: '. . .', 
    } 
})(); 
+2

ваш 'StoreController' пуст, но ваш HTML ожидает в котором должен быть указан объект, называемый «продуктом». – Claies

+0

I second @Claies ... Это должно быть проблемой. – dowomenfart

+0

ОК, с измененным контроллером вы должны получать выход. Что на самом деле происходит? вы видите ошибки в консоли? – Claies

ответ

0

AngularJS будет вызывать StoreController с объектом $ Scope. $ scope - это объект приложения (владелец переменных приложения и функций).

В app.js:

(function(){ 
    var app = angular.module('store', [ ]); 
    app.controller('StoreController', function($scope){ 
    $scope.product = gem; 
    }); 

    var gem = { 
    name: 'Dodecahedron', 
    price: 2.95, 
    description: '. . .', 
    } 
})(); 

В HTML:

<body ng-controller="StoreController as store"> 
    <h1> {{product.name}} </h1> 
    <h2> $ {{product.price}} </h2> 
    <p> {{product.description}} </p> 
    </body> 
0

Вы должны использовать $ объем внутри контроллера, то только он будет работает

(function(){ 
    var app = angular.module('store', [ ]); 
    app.controller('StoreController', function($scope){ 
    $scope.product = gem; 
    }); 

    var gem = { 
    name: 'Dodecahedron', 
    price: 2.95, 
    description: '. . .', 
    } 
})(); 
Смежные вопросы