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.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' });

此处，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'字符串作为用于访问属性的对象。

所以回答这个问题：对如何使用这个和$ scope进行一些混淆

您通常会使用其中一种。在第二种情况下，如果需要$scope属性，或者使用其他特殊范围函数，则只会注入$watch。

Angularjs $ scope和这个函数

2 个答案: