Question

我在Coursera上学习AngularJS课程。

教师在视频中演示的代码可以正常工作，但出于某种原因，我无法在我的环境中运行：

页面布局（部分）：

<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>

Snippet A（由教授证明，我无法上班）：

var app = angular.module('confusionApp',[]);        
app.controller('dishDetailController', function() {

var dish={ //attributes here; };

this.dish = dish;

});

当我运行此功能时，我不会在控制台中出现任何错误，但我在显示屏上没有任何内容。

摘录B：

var app = angular.module('confusionApp',[]);
app.controller('dishDetailController', function($scope) {

var dish={ //attributes here;};

$scope.dish = dish;
});

当我这样做时，它有效。有区别吗？

Answer 1

由于控制器的连接方式，

Snippet A无法正常工作。我在这里疯狂猜测。

您添加ng-controller的位置应该类似于：

 <body ng-controller="dishDetailController as dish">

你可能会改为：

 <body ng-controller="dishDetailController">

可能不是身体标签可能是div或其他东西。

为了更好地理解它在片段内的控制器尝试：

var app = angular.module('confusionApp',[]);        
app.controller('dishDetailController', function() {

    this = {//attributes here}

});

否则你可能需要在模板中写下{{dish.dish.stuff}}。

Answer 2

第二个代码段（B）或多或少地直接来自文档https://docs.angularjs.org/guide/controller，很可能是您正在寻找的内容。

在代码段A中，通过this分配值会将值直接应用于控制器本身。这将使其在其他环境中访问变得非常困难，并且很可能不是您想要的。

相反，Snippet B正在利用AngularJS提供的依赖注入来确保将适当的范围注入到方法中。 $scope的生命周期要复杂得多，但需要注意的是，这会使dish在控制器的上下文之外可用，例如在HTML模板中。

如果您需要更多详细信息，这家伙有更好的答案：'this' vs $scope in AngularJS controllers

Answer 3

chech this code it is working 

<div ng-app='confusionApp' ng-controller='dishDetailController' class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price}}</span></h2>
<p>{{dish.description1}}</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
<script type="text/javascript">

var app = angular.module('confusionApp',[]);
app.controller('dishDetailController', function($scope) {

var dish={ label:'name',name:'afzal',price:'10',description1:'this is the price'};

$scope.dish = dish;
});
</script>

这2个Angular代码片段之间的区别是什么？

3 个答案: