Question

我还是很陌生，这是我第一次尝试制作应用程序而不遵循任何指南。出于某种原因，我在网页中的输出是{{$ scope.products}}而不是实际值。任何人都可以告诉我为什么它不会从控制器加载角度代码？

的index.html

 <<!doctype html ng-app="MyFirstApp"> 
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainController as ctrl">
{{ctrl.name}}
{{"Hello World"}}

</body>
</html>

app.js

  var app = angular.module('MyFirstApp', [])
.controller('MainController', function(){

this.name = "Joe";

});

Answer 1

您的代码段包含一些错误：

<!doctype html ng-app="MyFirstApp">：ngApp指令太高了。请至少将其放在<body>标记中。
ng-controller="MainController as ctrl"：如果这是你的第一个AJS示例，请注意控制器是最佳实践，但有点先进。此选择将稍微调整控制器代码。
{{products.title}}：产品是一个阵列！
... .controller('MainController',[$scope function($scope){：controller方法的第二个参数是一个数组，所以在$scope和function之间需要一个逗号。在您的情况下，数组必须是：['$scope',function($scope){...}]。有关详细信息，请参阅https://docs.angularjs.org/guide/di
$scope.products = [...];：为了避免使用controllerAs反模式，您必须使用this.products。

请更新您的代码。

Answer 2

var app = angular.module('MyFirstApp', [])
.controller('MainController', function(){
  
  this.name = "Joe"

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyFirstApp" ng-controller="MainController as ctrl">
  {{ctrl.name}}
</div>

AngularJS文档可能非常令人困惑。

将值分配给$scope被认为是一种不好的做法。这是controllerAs语法解决的问题之一。因此，不要将产品添加到$scope.products - 而是将其添加到this.name。

然后在您的视图中，您将使用{{ctrl.name}}

访问它们

我希望这会有所帮助。

Answer 3

你需要在''和'之间将控制权放在你的控制器之间你在$ scope

之后遗漏了一些东西

.controller（ 'MainController'，[ '$范围'，函数（$范围）{

}]）;

并且控制器中的数组没有迭代来在html中绑定

第一个Angular应用程序不从控制器输出

3 个答案: