How to call factory methods from HTML in angularjs?

Question

In controller I have followed methods:

var isPaused  = false; 

$scope.switcher = function (booleanExpr, trueValue, falseValue) {
    return booleanExpr ? trueValue : falseValue;
};

$scope.isPaused = function () {
    return isPaused;
};

And I can call it from HTML like:

<body  ng-controller="Cntrl">

...
<h4>
 {{ switcher( isPaused(), 'Search Address Mode', 'Search Location Mode' )}}
</h4>
 <div class="btn-group">
    ...     
 </div>

As you see if isPaused() returns false I get <h4>Search Location Mode</h4>

This is utility therefore I want to define it as factory

feederliteModule.factory('switcher', function () {   
return {
    sw: function (booleanExpr, trueValue, falseValue) {
        return booleanExpr ? trueValue : falseValue;  
    }
  };
});

No exceptions but

when I try to call it like:

<h4>
 {{ switcher.sw( isPaused(), 'Search Address Mode', 'Search Location Mode' )}}
</h4>
 <div class="btn-group">
    ...     
 </div>

Nothing happens.

**I added 'switcher' to controller.

How can I call factory method from HTML?

(*You welcome to change/edit my question if it seems not clear)

Thank you,

how did you manage to accomplish this?I have a similar problem … might be I just shouldn't be doing all this like that — trainoasis
– trainoasis, Commented Feb 11, 2014 at 13:29
I thought it did not solve your question entirely since its not accepted? — trainoasis
– trainoasis, Commented Feb 11, 2014 at 13:41
couse I know you can call it like he showed below. But I need to be able to call it with ng-click … so I just need to leave my method in controller and not in a separate factory? — trainoasis
– trainoasis, Commented Feb 11, 2014 at 13:43

Ben Lesh · Accepted Answer · 2013-05-14 14:15:22Z

52

Well, you're not really supposed to do that... but what you can do is put your service object in a property on your $scope, and call it from there.

app.controller('MyCtrl', function($scope, switcher) {
   $scope.switcher = switcher;
});

answered May 14, 2013 at 14:15

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Maxim Shoustin Over a year ago

Why not supposed? is it seems messy?. Your solution works. THe question is why I need create $scope.switcher if controller receives switcher identifier. Thanks

Chandermani Over a year ago

HTML views can only be linked to Controller (using the $scope variable) or extended with Directives. Any other way is not an angular way :)

Maxim Shoustin Over a year ago

@Chandermani I use this method in several controllers and the easy/short way is to create factory or service.

Felype Over a year ago

Because when you add {{}} expressions, angular calls $scope.$eval() and $scope.$eval looks at things differently, it seems MyVariable as $scope.MyVariable, if you try {{switcher}} it will just look for $scope.switcher.

Robert Christian · Accepted Answer · 2013-11-04 22:02:50Z

3

I had a more general question, "How to call angularjs scope/factory/service from html on page load." My solution was to call the method within ng-show.

At the highest element surrounding the context in question,
Call the method using the ng-show directive.
The method will run prior to displaying the page.
Note you can also use a solution like this to make sure that bootstrapping work is finished prior to displaying a page (this can reduce the number of moving parts in a scattered rendering)

<div ng-show="runThisMethod(someVarOnScope)" .....>

answered Nov 4, 2013 at 22:02

Robert Christian

18.3k20 gold badges77 silver badges90 bronze badges

Comments

ArifMustafa · Accepted Answer · 2018-08-08 18:06:25Z

Using AngularJS 1.7.2 and Page Controller (Every Webpage has it's own controller)

First take the Factory view:

AppName.factory('eventMate', function() {
    let obj = this;

    obj.search = "";

    obj.setSearchValue = function(value) {
        obj.search = value;
        return obj.search;
    };

    obj.getSearchValue = function() {
        return obj.search;
    };

    return obj;
});

In one of the child Controller, named rfcController

AppName.controller("rfcController", function ($scope, $http, $filter, $window, $location, $anchorScroll,
                                               textMate, datetimeMate, restpack, pagination, imageMate, eventMate) {

    //there are many more service providers and injectors also, just showing for an idea
    $scope.eventMate = eventMate;


    $scope.getFiltered = function(){
        let searchValue = $scope.eventMate.getSearchValue().toString();

        if(searchValue === undefined){
            return "";
        } else {
            return searchValue.toString();
        }
    };
}

Now see the source through html side, where I will call this method.

<table>
    <tr class="rfc_table_td_tr" ng-repeat="(key, value) in rfcDetails | filter:getFiltered()">
        <td>{{value.createdDate}}</td>
        <td>{{value.rfcTitle}}</td>
        <td>{{value.rfcDetails}}</td>
    </tr>
</table>

Hope it will help many one. :D

Collectives™ on Stack Overflow

How to call factory methods from HTML in angularjs?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related