Angularjs $範圍和此功能

Question

我正在angularjs中的一個小應用程序： -

我正在刪除聯繫人。一切工作正常，但this.openModal（）拋出錯誤，因爲未定義，即使它在相同的JS中定義。

對如何一起使用這個和$範圍有一些混淆。 任何人都可以幫忙嗎？

$scope.deleteContact = function() 
{ 
    var delNo = $scope.contactNumber; 
    var delName = $scope.contactName; 

    var person = {}; 
    person['phone'] = delNo; 

    ... 
    ... 
    $timeout(function(){ 
     delete $scope.contacts[person['phone']]; 
     }); 

    $scope.activeChats={}; 
    $scope.showContactName = false; 
    this.openModal(); 

    console.log("Delete success"); 

} 

編輯：

this.openModal是我定義的函數如下

this.openModal = function (input) { 
    this.modalOpen = !this.modalOpen; 
    // RESET 
    this.showNewMessage = false; 
    this.showEditGroup = false; 
    this.showAddContact = false; 
    this.showPersonSettings = false; 
    this.showUserProfile = false; 

    if (input == "newmessage"){ 
     this.showNewMessage = true; 
    } else if (input == "showEditGroup"){ 
     this.showEditGroup = true; 
    } else if (input == "newcontact"){ 
     this.showAddContact = true; 
    } else if (input == "userprofile"){ 
     this.showUserProfile = true; 
    } else if (input == "usersettings"){ 
     this.showPersonSettings = true; 
    } 
} 

Answer 1

這並不完全清楚自己在做什麼，但我想你是有一些執行異步功能的上下文問題。嘗試將$scope分配給在您的功能塊中關閉它的局部變量，並在asnyc函數的塊中使用該變量。

$scope.deleteContact = function() 
{ 
    var person = { 
     phone: $scope.contactNumber 
    }; 

    ... 

    // save scope reference to local variable 
    var scope = $scope; 

    $timeout(function(){ 
     // use saved scope 
     delete scope.contacts[person['phone']]; 
    }); 

    $scope.activeChats={}; 
    $scope.showContactName = false; 
    this.openModal(); 

    console.log("Delete success"); 
} 

還有另一種方式，有點做類似的東西，但在角的代碼裏面。那是angular.bind。在你的$timeout中使用它。相似之處在於你在執行時提供了函數的上下文，所以你提供了this。在以下情況下，我提供$scope是異步函數此指其使用this到執行上下文：

$timeout(angular.bind($scope, function(){ 
    // context (this) is actually $scope 
    delete this.contacts[person['phone']]; 
})); 

Answer 2

您在兩種情況下請使用$scope或this。在您使用綁定的第一個場景：

ng-controller="MyCtrl" 

還是在路線：

when('/color', { controller : 'MyCtrl' }); 

這裏，角JS希望您在您的控制器$scope服務和附加綁定屬性到：

angular.module('myModule') 
    .controller('MyCtrl', ['$scope', myCtrl]); 

function myCtrl($scope) { 
    $scope.title = "Hello"; 
} 

在第二種情況下，您定義了一個controllerAs，這是角度期望看到控制器對象上的可綁定屬性的位置，控制器作爲一個類。我喜歡這種方法，因爲它看起來更乾淨。

ng-controller="MyCtrl as vm" 

還是在路線：

when('/color', { controller : 'MyCtrl', controllerAs: 'vm' }); 

控制器：

angular.module('myModule') 
    .controller('MyCtrl', [myCtrl]); 

function myCtrl() { 
    this.title = "Hello"; 

    // or to make sure that you don't get JS contexts mixed up 
    var vm = this; 

    vm.title = "Hello"; 

    vm.openModal = function() { 
     this;// this refers to the current function scope 

     vm.title = "Modal Opened"; // this refers to the controller scope 
     // scope as in the JS function context. 
    } 
} 

在第二種情況下，綁定頁面看起來就像這樣：

<h3>{{vm.title}}</h3> 

在哪裏你使用'controllerAs'字符串作爲對象你用來訪問屬性。

因此，要回答這個問題：對如何使用一些這方面的困惑和$範圍在一起

您通常會使用一個或另一個。在第二種情況下，如果您需要$watch屬性，或者使用其他特殊範圍功能，則只需要注入$scope。