Question

我创建了一个AngularJS工厂，我在其中返回一个具有某些功能作为属性的对象。我的目的是在使用 this 关键字返回的另一个函数中调用某个函数，但是它给出了一个错误。我试着在console.log中找到这个关键字，我发现，这个变量保存了调用工厂的调用范围。我怎样才能解决这种情况。此关键字应返回当前返回的对象！

 app.module('admin').factory('login', [function() {
return {
    someFunc: function() {
        return 'abc'
    },
    anotherFunc : function(){

        var msg = this.someFunc();
        return 'Msg is '+ msg;

    },
    yetAnotherFunc : function(){

        var msg = this.someFunc();
        return 'Msg is '+ msg;

    }
}
}]).controller(['$scope', 'login', function($scope, login){
    login.someFunc(); // Works Fine
    login.anotherFunc(); // Error : this.someFunc is not a function
}])

Answer 1

试试这个：

app.module('admin').factory('login', [function() {
    function someFunc() {
        return 'abc';
    }

    return {
        someFunc: someFunc,
        anotherFunc : function(){

            var msg = someFunc();
            return 'Msg is '+ msg;

        },
        yetAnotherFunc : function(){

            var msg = someFunc();
            return 'Msg is '+ msg;

        }
    };
}]).controller(['$scope', 'login', function($scope, login){
    login.someFunc();
    login.anotherFunc();
}]);

现在someFunc将在返回对象的范围内可见。

编辑：

关于this问题，我认为您误解了this在Javascript中的运作方式。

this关键字仅适用于＆＃34;正确＆＃34;在某些情况下：

您正在使用new关键字
您正在调用绑定函数（请参阅the docs）
您正在使用call或apply调用函数并为其提供上下文（this）

看看Waxolunist的回答，我可以看到你发布的代码实际上是有效的，所以你可能正在做其他导致错误的事情。我猜它看起来像这样

$scope.yetAnotherFunc = login.yetAnotherFunc

这将＆＃34;分离＆＃34; yetAnotherFunc来自其背景，这就是this不符合您预期的原因。

Answer 2

以下是小提琴中的解决方案：

https://jsfiddle.net/waxolunist/fcxu5eej/

HTML：

<div ng-app="app">
    <div ng-controller="LoginController">
        Get a Message:
        <button ng-click="someFunc()">someFunc</button>
        <button ng-click="anotherFunc()">anotherFunc</button>
        <button ng-click="yetAnotherFunc()">yetAnotherFunc</button>

        <div>Answer: {{answer}}</div>
    </div>
</div>

JS：

var app = angular.module('app', []);

app.controller('LoginController', function($scope, LoginFactory) {

    $scope.someFunc = function() {
        $scope.answer = LoginFactory.someFunc();
    }

    $scope.anotherFunc = function() {
        $scope.answer = LoginFactory.anotherFunc();
    }

    $scope.yetAnotherFunc = function() {
        $scope.answer = LoginFactory.yetAnotherFunc();
    }
});

app.factory('LoginFactory', [function() {
    return {
        someFunc: function() {
            return 'abc'
        },
        anotherFunc : function(){
            var msg = this.someFunc();
            return 'Msg is '+ msg;
        },
        yetAnotherFunc : function(){
            var msg = this.someFunc();
            return 'Another msg is '+ msg;
        }
    }
}]);

但我真的怀疑工厂是正确的选择。也许服务会更合适。但基本上你的代码可以工作。

Answer 3

https://jsfiddle.net/6fwu7ghs/

HTML

<div ng-app="test" ng-controller="testController">
<input type="button" ng-click="testFunc2()" value="test2" />
<input type="button" ng-click="testFunc1()" value="test1" />
</div>

JS

var testModule = angular.module('test',[ ]);
testModule.controller('common' , function(  $scope ) {
$scope.testFunc1 = function(){
    alert("test1");
    };
});
testModule.controller('testController', function( $scope , $controller ){ 
//inherit
$controller('common', {
    $scope: $scope
});

$scope.testFunc2 = function (){
alert("test2");
};
});

这是怎么回事？我只是使用控制器继承＆＃39;

你真的需要使用＆＃39; Factory＆＃39; ？那不是答案。

AngularJS Factory从返回对象访问此方法

3 个答案: