[英]Angular controller not talking to view
index.html
不适用于嵌入式Angular代码。 链接标签看起来像它们在工作(页面已格式化)-我将脚本标签移到顶部,但是视图仍然显示Angular表达式语法而不是值
{{ products.price | currency }} instead of $18.99
mainController看起来像这样:
app.controller('MainController',[$scope function($scope){
// var vm = this;
$scope.title = 'Bonisecrest';
$scope.promo = 'Season Sale';
$scope.products =
[
{
name: 'AHA/BHA EXFOLIATING CLEANSER',
price: 18.99,
info: '5 fluid ounces | 148 mL',
image: '\images\abaBha.jpg',
description: "This.."
}
}]);
视图看起来像:
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<!-- Modules -->
<script src="/js/app.js"></script>
<!-- Controllers -->
<script src="/js/controllers/MainController.js"></script>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,400' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
</head>
<body ng-app="myApp">
<div class="header">
<div class="container">
<h2>HEADER HERE</h2>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>{{ title }}</h1>
<h2>{{ promo }}</h2>
<div ng-repeat="product in products" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{products.image}}">
<p class="title">{{ products.name }}</p>
<p class="price">{{ products.price | currency }}</p>
<p class="info">{{ products.info }}</p>
</div>
</div>
并且加载的页面看起来:损坏。
我试过使用MainController作为主要:
<div class="main" ng-controller="MainController as main">
<div class="container">
<h1>{{ main.title }}</h1>
<h2>{{ main.promo }}</h2>
另外,尝试不使用$scope
app.controller('MainController',[function(){
var vm = this;
vm.title = 'Bonisecrest';
vm.promo = 'Season Sale';
vm.products =
我不确定如何检查是绑定还是应用程序未正确初始化,或两者都检查。
有人可以发现什么地方不对吗?
您需要第一行将$scope
作为数组中的字符串传递,并且需要这样的逗号: app.controller('MainController',['$scope', function($scope){
下面是解小提琴
产品数组未关闭:
$scope.products =
[
{
name: 'AHA/BHA EXFOLIATING CLEANSER',
price: 18.99,
info: '5 fluid ounces | 148 mL',
image: '\images\abaBha.jpg',
description: "This.."
}];
并在模板中解析产品而不是产品:
<div ng-repeat="product in products" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{product.image}}">
<p class="title">{{ product.name }}</p>
<p class="price">{{ product.price | currency }}</p>
<p class="info">{{ product.info }}</p>
</div>
</div>
这是演示http://jsfiddle.net/p1wvsy4w/您必须按以下方式更新代码
app.controller('MainController',['$scope', function($scope){
app.controller('MainController',['$scope', function($scope){
// var vm = this;
$scope.title = 'Bonisecrest';
$scope.promo = 'Season Sale';
$scope.products =
[
{
name: 'AHA/BHA EXFOLIATING CLEANSER',
price: 18.99,
info: '5 fluid ounces | 148 mL',
image: '\images\abaBha.jpg',
description: "This.."
}];
}]);
html
<div ng-repeat="product in products" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{product.image}}">
<p class="title">{{ product.name }}</p>
<p class="price">{{ product.price | currency }}</p>
<p class="info">{{ product.info }}</p>
</div>
</div>
希望这对您有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.