Angularjs$scope和此函数

Angularjs $scope and this functions

本文关键字：函数 scope Angularjs      更新时间：2024-04-01

我正在angularjs:-中开发一个小型应用程序

我正在删除一个联系人。一切都很好，但this.openModal（）会抛出一个未定义的错误，即使它是在同一个JS中定义的。

关于如何将this和$scope一起使用，有一些困惑。有人能帮忙吗？

$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");
}

编辑：

这个.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;
    }
}

您正在做什么还不完全清楚，但我想您在执行异步函数时遇到了一些上下文问题。尝试将$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的代码中做一些类似的事情。这就是angular.bind。在$timeout中使用它。相似之处在于，您在执行时提供函数的上下文，因此this就是您提供的内容。在下面的例子中，我提供$scope作为异步函数的执行上下文，这是指使用this:

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

在两种情况下使用$scope或this。使用绑定的第一个场景：

ng-controller="MyCtrl"

或者在路线上：

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

在这里，angular js希望您在控制器中包含$scope服务，并为其附加可绑定属性：

angular.module('myModule')
    .controller('MyCtrl', ['$scope', myCtrl]);
function myCtrl($scope) {
    $scope.title = "Hello";
}

在第二个场景中，您定义了一个controllerAs，angular将在这里看到控制器对象上的可绑定属性，控制器是一个类。我更喜欢这种方法，因为它看起来更干净。

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"字符串作为用于访问属性的对象的位置。

因此，为了回答这个问题：对于如何将this和$scope一起使用有一些困惑

你通常会使用其中一个。在第二个场景中，只有在需要$watch属性或使用其他特殊作用域函数时，才会注入$scope。

相关文章：