角范围变量和正常的控制变量

第一组代码：

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新手

来源

2014-10-01 Yokesh T

你应该阅读Angular如何处理'$ scope'。这是绑定到UI的推荐方式。对于其中一个，如果没有'$ scope'，你不会'$ watch'，因此我不希望双向绑定起作用。此外，您的片段似乎为我运行。 – 2014-10-01 09:46:06

请看这篇文章和视频https://thinkster.io/egghead/experimental-controller-as-syntax/ – Chandermani 2014-10-01 12:28:35

代码正在工作。 – 2014-10-06 05:11:04

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

为什么？：控制器被构建，“新建”并提供一个新实例，并且controllerAs语法比经典的$ scope语法更接近于JavaScript构造器的语法。

为什么？它促进绑定到视图中的“虚线”对象（例如，customer.name而不是名称），这是更上下文的，更容易阅读，并避免任何可能发生的参考问题“点睛”。

为什么？：帮助避免在嵌套控制器的视图中使用$父呼叫。

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

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

controllerAs控制器语法：使用controllerAs语法在经典控制器$范围语法。

的controllerAs语法使用它被绑定到$范围

为什么？：controllerAs超过$范围语法糖这里面的控制器。您仍然可以绑定到视图并仍然访问$ scope方法。

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

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

controllerAs与VM：使用controllerAs语法时，使用捕获变量这一点。选择一个一致的变量名称，例如vm，它代表ViewModel。

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

/* 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

来源

2014-10-01 12:12:24 Jack

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

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

因此，存在定义Angular应用程序状态的$scope对象树。 Angular每提醒一次（通过其$digest周期），Angular将检查树中所有$scope对象上的值。如果值已更改，则Angular可重新绑定UI。这基本上是2路绑定的工作原理。

因此，使用你的第一个例子将工作，但不会给你使用Angular的许多好处。

您可以从下面的例子中看到，当点击事件被触发，该数据不更新，因为它应该：

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

<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>

来源

2014-10-01 10:06:49

这个例子不适合作为参数。首先，您在'clickMe'函数内使用'this'关键字，这是另一个上下文。只要控制器启动到某个变量并使用它，您应该捕获'this'。然后它会奏效，请参阅**杰克的答案来理解。 – Alisson 2017-06-08 12:09:22

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

<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>

上面的代码将工作，并且还正在做一个双向数据绑定。所以通过使用“this”在控制器中声明函数和变量，我可以专门在该函数中使用这些变量和函数，而不是使用$ scope树来增长。在这种情况下，我可以减少变量的内存大小和功能。有人可以纠正我，如果我错了

来源

2014-10-06 05:03:42

角范围变量和正常的控制变量

回答

相关问题