Angularjs $scope 和这个函数

Question

我正在 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");

}

编辑：

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 的代码中执行类似的操作。那就是 angular.bind。在你的 $timeout 中使用它。相似之处在于您在执行时提供函数的上下文，因此 this 就是您提供的内容。在以下情况下，我提供 $scope 作为异步函数的执行上下文，this 使用 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' });

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

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

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

在第二种情况下，您定义了一个 controllerAs，这是 angular 期望在控制器对象上看到可绑定属性的地方，控制器作为 class。我更喜欢这种方法，因为它看起来更干净。

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。

Angularjs $scope 和这个函数

Angularjs $scope and this functions

javascript

angularjs

scope

this