尝试在AngularJS中从控制器（$ scope）向视图（HTML）中插入元素

Question

我想在项目的视图中插入一个字典（对象数组）。视图称为“产品”，控制器称为“ProductCtrl”。

我想要显示的输出只是静态数据。以下是我的代码：

/*
* "product" module.
*/
'use strict';

angular.module('myApp.products', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/products', {
    templateUrl: 'products/products.html',
    controller: 'ProductCtrl'
  });
}])

.controller('ProductCtrl', [function($scope) {
//the problem is that I wanna insert those elements using angular and I cannot.
  $scope.productos=[
		{titulo:"1111", descripcion:"!", precio: 25.95,	imagen: "camisetas2.png"},
		{titulo:"2222", descripcion:"!A", precio: 25.95,	imagen: "camisetas3.png"}
		
		];

}]);

<!--("Producto" View-HTML)-->

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="row" ng-controller="ProductCtrl">
	<div class="col-md-12">
	
		<div class="row" ng-repeat="producto in productos"> <!-- Basic for loop -->
						<div class="col-md-12">
						
						<!-- Inicio del contenido; se exponen la empresa y sus servicios (9/4 grid system) -->
							<h2>{{ producto.titulo }}</h2>
							<div class="row">
								<div class="col-md-2">
									<img width="120" height="120" alt="mundo camis" src="img/mundo.jpg" class="img-circle">
								</div>
								
								<div class="col-md-10">
									<div class="caption">
										<h3> {{ producto.titulo }} </h3>
											<p> {{ producto.descripcion }}  </p>
										
										<p> <a class="btn-primary" href="#">Ver más</a> </p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<br /> <br />
		
	</div>
</div>
</div>

Answer 1

您遇到了一些错误，最重要的是 - 没有设置ng-app属性。我为你做了一个简单的例子。以下代码，请点击此处：http://codepen.io/anon/pen/GoqWyM。

我建议从以下教程学习Angular：http://campus.codeschool.com/courses/shaping-up-with-angular-js/。

答案是：

＆＃13;

＆＃13;

/*
* "product" module.
*/
'use strict';

var app = angular.module('Products', []);

app.controller('Producto', [function() {

  this.productos=[
		{titulo:"1111", descripcion:"!", precio: 25.95,	imagen: "camisetas2.png"},
		{titulo:"2222", descripcion:"!A", precio: 25.95,	imagen: "camisetas3.png"}
		
		];

}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Products" class="row" ng-controller="Producto as ProdCtrl">
  <div ng-repeat="producto in ProdCtrl.productos">
    {{ producto.titulo }}
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;