关于javascript：这两个Angular代码片段有什么区别？


What's the difference between these 2 Angular code snippets?

本问题已经有最佳答案，请猛点这里访问。

我要上一门关于安古拉吉斯的课程。

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

页面布局(部分)：

1
2
3
4
5
6
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span>
<p>
{{dish.description}}
</p>

片段A(教授证明我无法工作)：

1
2
3
4
5
6
7
8
var app = angular.module('confusionApp',[]);        
app.controller('dishDetailController', function() {

var dish={ //attributes here; };

this.dish = dish;

});

当我运行这个函数时，我在控制台中不会得到任何错误，但是在显示中不会得到任何错误。

片段B：

1
2
3
4
5
6
7
var app = angular.module('confusionApp',[]);
app.controller('dishDetailController', function($scope) {

var dish={ //attributes here;};

$scope.dish = dish;
});

当我这样做的时候，它是有效的。有什么区别吗？

相关讨论

由于控制器的连接方式，代码段A很可能无法工作。我在这里胡思乱想。

如果添加ng-controller，它可能看起来像：

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

你可能会有这样的选择：

1
 <body ng-controller="dishDetailController">

可能不是body标记，也可能是一个div或其他东西。

为了在代码片段中更清楚地理解它，控制器可以尝试：

1
2
3
4
5
6
var app = angular.module('confusionApp',[]);        
app.controller('dishDetailController', function() {

    this = {//attributes here}

});

否则，您可能需要在模板中编写：{{dish.dish.stuff}}。

相关讨论

第二个片段(b)或多或少是直接从文档https://docs.angularjs.org/guide/controller中提取出来的，并且很可能是您正在寻找的。

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

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

如果你需要更多的细节，这家伙有一个更好的答案："这"和$scope在AngularJS控制器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
chech this code it is working


<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price}}</span>
<p>
{{dish.description1}}
</p>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js">
<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;
});
相关讨论