2

我有一些邏輯我想要包裝到AngularJS工廠中,以便我可以使用angular的依賴注入。由於邏輯是動態的,我不一定知道什麼可以提前打電話。我所擁有的是一個表示要調用的函數名稱的字符串。我知道我可以像window["someFunctionName"]()那樣使用字符串運行函數,但是因爲所有內容都被封裝在工廠中,所以我不知道如何獲取工廠的參考來調用它。恩。 sampleFactory["someFuncitonName"]();如何在工廠內使用angularjs中的字符串調用函數

我發現運行該功能的唯一方法是使用eval("someFuncitonName()")。很顯然,如果可以的話,我想避免使用eval。

這裏是什麼,我試圖做一個例子:

'use strict'; 

angular.module('testApp') 
    .factory('testFactory', function (someData) { 

    // User defined code that was wrapped up in a factory 
    function foo() { 
     someData.amount = 5; 
    } 
    // End dynamic code 

    return { 
     funcRunner: function(functionName) { 
     testFactory[functionName](); 
     } 
    }; 

    }); 

在控制器中的用戶將運行像這樣testFactory.funcRunner("foo");

有什麼辦法可以沿着這些路線做點什麼testFactory[functionName]();?有沒有更好的方法來做到這一點?謝謝你的幫助。

更新:由於評論中的代碼是用戶定義的,我無法知道,也無法控制評論中代碼的寫入方式。我不想強制用戶有任何限制。所以我可以期待很少。

+0

你只是想要返回someData.amount? –

+1

有什麼辦法可以生成代碼,而不是將函數定義爲函數foo(){},它被定義爲this.foo = function(){}? – drdalton

+0

我應該更清楚。代碼是用戶定義的,所以我不能控制如何/寫什麼。 – yodaisgreen

回答

-1

從我看過沒有辦法做到這一點。它只是如何JavaScript的作品。沒有辦法通過字符串調用foo函數。 foo函數必須是用字符串調用它的對象的一部分。我只是想確認有沒有什麼聰明的方法。

+1

我不喜歡它先生-1,但沒有任何方法可以將JS函數作爲字符串調用。由於這個事實,我不得不改變我的方法,但我希望被證明是錯誤的。 – yodaisgreen

5

試試這個辦法:

angular.module('testApp').factory('testFactory', function() { 
    var service = this; 
    this.foo = function() { 
     someData.amount = 5; 
    } 

    return { 
     funcRunner: function (functionName) { 
      service[functionName](); 
     } 
    }; 
}); 


function Ctrl($scope, testFactory) { 
    $scope.click = function() { 
     testFactory.funcRunner("foo"); 
    } 
} 
+0

是的。這將工作,但會要求我執行如何編寫代碼的規則。我真的不想那麼做。 – yodaisgreen

0

您可以使用$ parse來解析字符串並調用函數。這裏有一個例子:http://jsfiddle.net/WeirdAlfred/Lsfwtb96/

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

//inject the $parse service into your controller, service, factory, etc. 
app.controller('myController', ['$scope', '$parse', myController]); 

function myController($scope, $parse) { 
    //setup a function on scope that will receive the 
    //string that you wish to execute as a function. 
    //Note: this function doesn't need to be on scope, it's just there so 
    //we can call it with button clicks. This could be any function 
    //on a controller, service, factory, etc. 
    $scope.buttonClick = function (someStringValue, useAngularParse) { 
     alert('The string value passed in from the button click: ' + someStringValue); 

     //the parse service takes a string and converts it to a function call 
     //the format for the command is: 
     //$parse(inputString)(objectOfAvailableFunctions, objectOfParams); 
     $parse(someStringValue)(internalFunctions); 
    } 

    //this provides a list of available functions for the 
    //$parse to call when it evaluates the given string. 
    var internalFunctions = { 
     catsSuckEggs: catsSuckEggs, 
     dogsRock: dogsRock 
    } 

    //some random function that you want to make available via a string 
    function catsSuckEggs() { 
     alert('My cat is worthless!'); 
    } 

    //some other random function that you want to make available via a string 
    function dogsRock() { 
     alert('I wish my wife would let me have a dog!'); 
    } 
} 

下面是一些簡單的標記,使該buttonClick和傳遞的字符串中。

<body ng-app="myApp"> 
    <div ng-controller="myController"> 
     <h2>Do you like Cats or Dogs?</h2> 
     <button class="btn btn-danger" ng-click="buttonClick('catsSuckEggs()')">Cats</button> 
     <button class="btn btn-success" ng-click="buttonClick('dogsRock()')">Dogs</button> 
    </div> 
</body> 
+0

這將要求最終用戶創建一個internalFunctions obj。並在修改代碼時保持最新狀態。我試圖阻止用戶不必關心環境。我希望有一個我不知道的鬼祟的JS技巧。不過謝謝。 :) – yodaisgreen

相關問題