ng控制器不呈現數據到瀏覽器

我是Angular JS的新手，我在NG控制器中面臨一些問題，它不會將值發送到瀏覽器屏幕。我正在使用角1.5.8。我怎樣才能得到這個代碼，以顯示values.Attached是我的輸出以及這裏是我的代碼：的script.jsng控制器不呈現數據到瀏覽器

(function() { 
var gem = { 
    name: "Dodecahedron", 
    price: 2.95, 
    description: "great stone" 
}; 
var app = angular.module('store', []); 
app.controller('StoreController', function() { 
    this.product = gem; 
}); 
})();

HTML文件

<!DOCTYPE html> 
<html data-ng-app="store"> 
<head> 
    <script type="text/javascript" src="angular.js"></script> 
    <script type="text/javascript" src="script.js" ></script> 
    <link rel="stylesheet" type="text/css"  href="bootstrap/bootstrap/css/bootstrap.min.css"> 
    <meta charset="UTF-8"> 
    <title>Angular Demo</title> 
</head> 
<body > 
{{"Hello" + "Angular"}} 
<br /> 
Here is Where our gem information will be displayed through the controller. 

<div ng-controller="StoreController"> 
    {{"Hello" + "Angular"}} 
    <h1>Product name : {{StoreController.product.name}}</h1> 
    <h2>Produce Price : {{StoreController.product.price}}</h2> 
    <p>Product Description : {{StoreController.product.description}}</p> 
</div> 

</body> 
</html>

來源

2016-09-22 Anuvrat Tiku

您可以使用$範圍內可變控制

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

在HTML中，您可以訪問$範圍內的變量，直接像這樣

<div ng-controller="StoreController"> 
    {{"Hello" + "Angular"}} 
    <h1>Product name : {{product.name}}</h1> 
    <h2>Produce Price : {{product.price}}</h2> 
    <p>Product Description : {{product.description}}</p> 
</div>

來源

2016-09-22 06:23:09 Littlebird

謝謝哥們。有效 –

您應該使用$範圍變量

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

DEMO

否則，您可以使用Controller作爲語法。

來源

2016-09-22 05:44:38 Sajeetharan

如果您不想使用$scope，則可以使用controller as systax。

<div ng-controller="StoreController as ctrl"> 
    {{"Hello" + "Angular"}} 
    <h1>Product name : {{ctrl.product.name}}</h1> 
    <h2>Produce Price : {{ctrl.product.price}}</h2> 
    <p>Product Description : {{product.description}}</p> 
</div>

來源

2016-09-22 05:50:32

你缺少「StoreController爲StoreController」。

<div ng-controller="StoreController as StoreController"> 
    {{"Hello" + "Angular"}} 
    <h1>Product name : {{StoreController.product.name}}</h1> 
    <h2>Produce Price : {{StoreController.product.price}}</h2> 
    <p>Product Description : {{StoreController.product.description}}</p> 
</div>

工作扒手here。

來源

2016-09-22 05:50:40

ng控制器不呈現數據到瀏覽器

回答

相關問題