角範圍變量和正常的控制變量

第一組代碼：

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

角範圍變量和正常的控制變量

回答

相關問題