AngularJS工廠從返回對象訪問此方法

Question

我創建了一個AngularJS工廠，在該工廠中，我返回一個具有某些功能屬性的對象。我的目的是在使用這個關鍵字返回的函數中調用另一個函數中的某個函數，但它提供了一個錯誤。我試圖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問題，我想你是誤會在Javascript中如何this作品。

的this關鍵字只會在某些情況下工作「正常」：

• 你是用的是new關鍵字
• 你調用一個綁定功能創建的對象上調用的函數（見the docs）
• 你使用call或apply調用一個函數，給它一個上下文（這）

看着Waxolunist的回答，我可以看到你發佈的代碼實際上起作用了，所以你可能正在做其他事情導致錯誤。我猜它看起來是這樣的

$scope.yetAnotherFunc = login.yetAnotherFunc 

這從它的上下文將「分離」 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"); 
}; 
}); 

這個怎麼樣的方式。我只是使用控制器'繼承'

你真的需要使用'工廠'嗎？那麼這不是一個答案。