Angular Controller中的這個關鍵字

我可能會因爲問這樣一個愚蠢的問題而受到轟炸，但它更多的是一個問題，這將有助於使我的理解清晰。Angular Controller中的這個關鍵字

在JavaScript

所以，

var firstName = "Peter", 
    lastName = "Ally"; 

    function showFullName() { 
    // "this" inside this function will have the value of the window object 
    // because the showFullName() function is defined in the global scope, just like the firstName and lastName 
    console.log (this.firstName + " " + this.lastName); 
    } 

    var person = { 
    firstName :"Penelope", 
    lastName :"Barrymore", 
    showFullName:function() { 
    // "this" on the line below refers to the person object, because the showFullName function will be invoked by person object. 
    console.log (this.firstName + " " + this.lastName); 
    } 
    } 

    showFullName(); // Peter Ally 
 
    // window is the object that all global variables and functions are defined on, hence: 
    window.showFullName(); // Peter Ally

這我很清楚。現在的角度控制器，當我們試圖複製此，

<script> 
var app = angular.module("myApp", []); 
console.log("Before Controller",this); 
app.controller("myCtrl", function($scope) { 
    console.log(this); 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 
    this.myTestFunction = function(){ 
     return this; 
    } 

    console.log("In test function ",this.myTestFunction()); 
}); 
</script>

的second線仍然應登錄window權控制器功能在全球範圍內定義（我想）。 But in turn, it returns an Object. Why ?

另外，我可以在不使用ControllerAs語法的情況下使用this.myTestFunction。兩者有什麼區別？

Why the last line also logs object (In myTestFunction) when I am just simply returning this from within？

我不確定所有這些。有人可以用簡單的術語解釋嗎？

Before Controller Window {stop: function, open: function, alert: function, confirm: function, prompt: function…} 
VM2143 tryit.asp?filename=try_ng_module:5 Object {} 
VM2408 tryit.asp?filename=try_ng_module:12 In test function Object {myTestFunction: function}

來源

2017-04-26 StrugglingCoder

控制器功能未在全局範圍內定義。可以清楚地看到它是一個函數的參數'angular.controller（）' – charlietfl

爲什麼最後控制檯日誌顯示object object的是，你會再做連接對象爲字符串的原因。刪除字符串，只顯示功能響應。

console.log(this.myTestFunction());

與第2個問題，你不能訪問this.myTestFunction HTML中不使用控制器功能。沒有它，角度只能識別控制器中的示波器功能。

var app = angular.module("myApp", []); 
 
console.log("Before Controller",this); 
 
app.controller("myCtrl", function($scope) { 
 
    console.log(this); 
 
    $scope.firstName = "John"; 
 
    $scope.lastName = "Doe"; 
 
    this.myTestFunction = function(){ 
 
     return this; 
 
    } 
 

 
    console.log("In test function ",this.myTestFunction()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    
 
</div>

來源

2017-04-26 09:53:24

我仍然懷疑第二個'console.log（this）'。控制器功能是否在全局範圍內定義？那麼，它不應該顯示窗口而不是對象？ – StrugglingCoder

，因爲一旦你創建了一個控制器角度創建該功能的範圍。所以控制器作爲一個單獨的構造函數。所以在控制器內部，我們有了新的內容，只有我們在控制器內部聲明的內容纔是分配給它的屬性。在這種情況下'myTestFunction'函數 –

第二行仍然應該登錄窗口右邊作爲控制器函數是在全局範圍內定義（我想）。但是反過來，它會返回一個Object。爲什麼？

在AngularJs控制器，服務，工廠等，this關鍵詞絕對是您的控制器/模塊本身。事實上，當調用模塊構造函數時，this就是模塊本身。簡而言之，控制器上的this是一個包含所有控制器功能和變量的對象。如果控制器MyController綁定到視圖MyView.html那麼只有該精確視圖才能訪問MyController的變量和函數。

另外，我可以在不使用ControllerAs 語法的情況下使用this.myTestFunction。兩者有什麼區別？

不，您不能使用this而不使用ControllerAs語法。讓我們假設你有

angular.module('myApp') 
     .controller('MyController', MyController); 

function MyController(){ 
    var vm = this; 
    vm.hello = 'Hello There!'; 
}

而且

<body ng-controller="MyController as myCtrl"> 
    <p>{{myCtrl.hello}}</p> 
</body>

這將很好地渲染Hello There!。

爲什麼最後一行也是logsobject（在myTestFunction），當我只是簡單地從內部返回？

簡而言之，如前所述，this是一個包含在控制器本身內實例化的所有變量和函數的對象。

額外

你應該更喜歡使用this代替$scope控制器內。這有幾個原因。其中之一是，當你使用this定義一個函數時，你肯定知道這個特定的函數可以被給定的視圖或給定的模塊訪問。看看Angular Style Guide by John Papa on Controllers。

來源

2017-04-26 12:37:34 AndreaM16

Angular Controller中的這個關鍵字

回答

相關問題