bagya
bagya

Reputation: 397

How to assign the angular factory method dynamically?

Actually my requirement is to assign the angular factory method dynamically.

Please have a look this code:

angular.forEach(scope.mapperData.collections.controltype.rowset, function (value, index) {
    if (value.controltypeid == scope.controlId){
        scope.controlData = value.controltypename;
        controlContent = angular.element(layoutControlsFactory[scope.controlData]());
        $compile(controlContent)(scope);
        element.append(controlContent);
    }
}); 

var controlContent = angular.element(layoutControlsFactory[scope.controlData]());

In the above code has scope.controlData. The value will come dynamically. I need to assign the like

var controlContent = angular.element(layoutControlsFactory[ThirdPartyAutoComplete]());

Or

var controlContent = angular.element(layoutControlsFactory.ThirdPartyAutoComplete());

layoutControlsFactory Code

bosAppModule.factory("layoutControlsFactory",function($compile){
    var layoutControlsFactory={};

    layoutControlsFactory.ThirdPartyAutoComplete=function(controlId){
        console.log("## Create ThirdPartyAutoComplete");
        var template='<input kendo-auto-complete>';
        return template;
    };


    return layoutControlsFactory;
});

I tried but it's showing error.

typeError: layoutControlsFactory[scope.controlData] is not a function

I think I explained my requirement well. Please let me know if you need more details. Can any one help me to achieve this?

Upvotes: 0

Views: 49

Answers (1)

Jamiec
Jamiec

Reputation: 136144

When using square bracket notation, the bit in square brackets needs to be a string

var controlContent = angular.element(layoutControlsFactory[ThirdPartyAutoComplete]());

should be

var controlContent = angular.element(layoutControlsFactory["ThirdPartyAutoComplete"]());

A mockup example can be seen here: https://jsfiddle.net/jyonvcj4/1/

Upvotes: 2

Related Questions