angularjs – 角度范围变量和普通控制器变量

发布时间：2020-12-17 10:18:56 所属栏目：安全来源：网络整理

导读：我有两组代码,如下所示第一套代码： 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"/scripthtml ng-app="dem

我有两组代码,如下所示

第一套代码：

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',['$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的新手

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

为什么？：控制器被构造,“新建”并提供单个新实例,并且controllerAs语法比经典$scope语法更接近JavaScript构造函数的语法.

为什么？：它促进了对视图中“点”对象的绑定的使用(例如customer.name而不是name),这更加符合上下文,更易于阅读,并且避免了在没有“点”的情况下可能出现的任何引用问题.

为什么？：有助于避免在具有嵌套控制器的视图中使用$parent调用.

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

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

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

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;
注意：使用控制器创建控制器中的监视时,可以观看虚拟机.使用以下语法的成员. (小心创建手表,因为它们会为摘要周期增加更多负载.)

$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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!