Question

我有两组代码，如下所示

第一套代码：

var app=angular.module('demo', []);
app.controller('mainController',function(){
     this.myVar='hai';
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<html ng-app="demo">
<div ng-controller="mainController as mainControl">
  <p>{{mainControl.myVar}}</p>
</div>
</html>

第二套代码：

var app = angular.module('demo', []);
app.controller('mainController', ['$scope',
  function($scope) {
    $scope.myVar = 'hai';
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="demo">
<div ng-controller="mainController">
  <p>{{myVar}}</p>
</div>

</html>

我想知道这两种向视图声明模型的方式之间的区别。有人可以解释一下。我是Angular JS的新手

Answer 1

controllerAs视图语法：使用带有$ scope语法的经典控制器上的controllerAs语法。

为什么？：控制器已构建，＆＃34;新增＆＃34; up，并提供一个新实例，controllerAs语法比经典$ scope语法更接近JavaScript构造函数。

为什么？：它促进使用绑定到＆＃34;点缀＆＃34;视图中的对象（例如customer.name而不是name），它更具上下文性，更易于阅读，并且避免了没有＆＃34; dotting＆＃34;可能发生的任何参考问题。

为什么？：帮助避免在具有嵌套控制器的Views中使用$ parent调用。

<!-- avoid -->
<div ng-controller="Customer">
  {{ name }}
</div>

<!-- recommended -->
<div ng-controller="Customer as customer">
  {{ customer.name }}
</div>

controllerAs控制器语法：使用带有$ scope语法的经典控制器上的controllerAs语法。

controllerAs语法使用这个绑定到$ scope

的内部控制器

为什么？：controllerAs是超过$ scope的语法糖。您仍然可以绑定到View并仍然访问$ scope方法。

为什么？：有助于避免在控制器中使用$ scope方法的诱惑，否则可能更好地避免它们或将它们移动到工厂。考虑在工厂中使用$ scope，或者在需要时在控制器中使用。例如，当使用$ emit，$ broadcast或$ on发布和订阅事件时，请考虑将这些用户移至工厂并从控制器调用。

/* avoid */
function Customer ($scope) {
  $scope.name = {};
  $scope.sendMessage = function () { };
}
/* recommended - but see next section */
function Customer () {
  this.name = {};
  this.sendMessage = function () { };
}

controllerAs with vm：使用controllerAs语法时，请使用捕获变量。选择一致的变量名称，例如vm，它代表ViewModel。

为什么？：this关键字是上下文的，当在控制器内的函数内使用时，可能会改变其上下文。捕获这种情况可以避免遇到这个问题。

/* avoid */
function Customer () {
  this.name = {};
  this.sendMessage = function () { };
}
/* recommended */
function Customer () {
  var vm = this;
  vm.name = {};
  vm.sendMessage = function () { };
}

注意：您可以通过将注释置于代码行上方来避免任何jshint警告。 / * jshint validthis：true / var vm = this; 注意：使用控制器创建控制器中的监视时，可以使用以下语法监视vm。成员。（小心创建手表，因为它们会为摘要周期增加更多负荷。）

$scope.$watch('vm.title', function(current, original) {
    $log.info('vm.title was %s', original);
    $log.info('vm.title is now %s', current);
});

https://github.com/johnpapa/angularjs-styleguide#controllers

Answer 2

你真的不应该使用this来声明使用Angular绑定到UI的模型。你的第一个例子在Angular很少见。根据我的经验，即使是控制器别名也没有那么多。

两个例子之间的区别在于，一个使用$scope而另一个不使用$scope。使用$scope是Angular如何将数据绑定（和双向绑定）到UI的基础。 this不是只是 $scope的替代品。 $scope从树上的父控制器$rootScope对象继承，直到达到$scope。

因此，有一个$digest个对象树定义了Angular应用程序的状态。每次Angular都会收到警告（通过$scope周期），Angular会检查树中所有var app=angular.module('demo', []); app.controller('mainController',function($scope){ this.myVar='hai'; $scope.clickMe = function() { this.myVar = "changed"; } });个对象的值。如果值已更改，Angular可以重新绑定UI。这实质上就是双向绑定的工作原理。

因此，使用您的第一个示例将起作用，但不会为您提供使用Angular的许多好处。

您可以从下面的示例中看到，当触发click事件时，数据不会按原样更新：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<html ng-app="demo">
<div ng-controller="mainController as mainControl">
  <p>{{mainControl.myVar}}</p>
  <button ng-click="clickMe()">click me</button>
</div>
</html>

{{1}}

Answer 3

＆＃13;

var app=angular.module('demo', []);
app.controller('mainController',function($scope){
     this.myVar='hai';
  
  
     this.clickMe = function() {
         this.myVar = "changed";
     }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<html ng-app="demo">
<div ng-controller="mainController as mainControl">
  <p>{{mainControl.myVar}}</p>
  <button ng-click="mainControl.clickMe()">click me</button>
</div>
</html>

＆＃13;

上面的代码将起作用，它也在进行双向数据绑定。因此，通过使用＆＃34来声明控制器内的函数和变量，这个＆＃34; ，我可以专门使用那些变量和函数，而不是通过使用$ scope，树将会增长。在这种情况下，我可以减少变量和函数的内存大小。如果我错了，有人可以纠正我吗

角度范围变量和正常控制器变量

3 个答案: