Angularjs: значения контроллера не отображаются на странице html

Я только что начал изучать angular.js. Я написал базовый контроллер в файле app.js и установил его свойство. Я пытаюсь получить доступ к этим данным внутри html-страницы, но напрасно. Значения свойств контроллера не отображаются на веб-странице. Ниже приведен код:Angularjs: значения контроллера не отображаются на странице html

app.js:

(function(){ 
    var app = angular.module('gemStore',[]); 
    var gem = {name: 'Diamond', price: 120, description: 'Hard'}; 
    app.controller('StoreController', function() { 
     this.product = gem; 

    }); 



})();

index.html

<!DOCTYPE html> 
<html ng-app="gemStore"> 
<head> 
<meta charset="ISO-8859-1"> 
<title>Insert title here</title> 

</head> 
<body> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" ></script> 
<script type="text/javascript" src="js/app.js" ></script> 

<p> {{"Hello, Angular!"}}</p> 

<div ng-controller="StoreController as store"> 
<h1>{{store.product.name}}</h1> 
<h2>{{store.product.price}}</h2> 
<h3>{{store.product.description}}</h3> 
</div> 
</body> 
</html>

Пожалуйста, скажите мне, где я буду неправильно !!

источник

2014-11-04 Manisha

«Контроллер как» -синтекс был добавлен в 1.2.0 (или около того), я не думаю, что он был в 1.0.7. Попробуйте использовать более новую версию Angular. Если вы застряли с 1.0.7, вам нужно использовать $scope.

источник

2014-11-04 11:42:23

Ваша версия AngularJS не поддерживает синтаксис StoreController as store. Измените его на StoreController и просто удалите store s. Также вы должны указать inject объект scope в контроллер и установить его свойства.

Вот обновленный и рабочий код.

var app = angular.module('gemStore', []); 
 
var gem = { 
 
    name: 'Diamond', 
 
    price: 120, 
 
    description: 'Hard' 
 
}; 
 

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

<!DOCTYPE html> 
 
<html ng-app="gemStore"> 
 

 
<head> 
 
    <meta charset="ISO-8859-1"> 
 
    <title>Insert title here</title> 
 

 
</head> 
 

 
<body> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
 
    <script type="text/javascript" src="js/app.js"></script> 
 

 
    <p>{{"Hello, Angular!"}}</p> 
 

 
    <div ng-controller="StoreController"> 
 
    <h1>{{product.name}}</h1> 
 
    <h2>{{product.price}}</h2> 
 
    <h3>{{product.description}}</h3> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2014-11-04 11:38:13

Набор

ng-app="gemStore"

на теле (или в любой тег HTML, который содержит ваши angularjs код)

вот jsfiddle: http://jsfiddle.net/49yrj986/

источник

2014-11-04 11:38:13 Michael

Спасибо! Проблема была неправильной версией углового js. Я обновил его до 1.3.1, и он сработал. – Manisha

Контроллер как синтаксис в угловом режиме был введен в версии 1.2, и вы используете версию 1.0.7. Если вы обновите версию углового в тегах скрипта до версии 1.2 или выше, она будет работать нормально.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js" ></script>

Вы также можете увидеть это работает отлично по следующей ссылке: http://jsbin.com/tadinesime/2/edit

Я надеюсь, что это помогает.

источник

2014-11-04 11:42:06

это курс по http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/2/our-first-controller, если кто-то хочет попробовать эти учебники

источник

2015-02-28 11:57:32 user3050538

Angularjs: значения контроллера не отображаются на странице html

ответ

Смежные вопросы