Question

在controller中，我遵循了以下方法：

var isPaused  = false; 

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

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

我可以从HTML中调用它：

<body  ng-controller="Cntrl">

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

如果您看到isPaused()返回false，我会<h4>Search Location Mode</h4>

这是实用程序，因此我想将其定义为factory

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

没有例外，但

当我尝试将其称为：

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

什么都没发生。

**我向控制器添加了'switcher'。

如何从HTML调用工厂方法？

（*如果看起来不清楚，欢迎更改/编辑我的问题）

谢谢，

Answer 1

好吧，你真的不应该这样做......但你可以做的是将你的服务对象放在$ scope的属性中，并从那里调用它。

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

Answer 2

我有一个更普遍的问题，“如何在页面加载时从html调用angularjs范围/工厂/服务。”我的解决方案是在ng-show中调用该方法。

在有关上下文的最高元素处，
使用ng-show指令调用方法。
该方法将在显示页面之前运行。
请注意，您也可以使用这样的解决方案来确保在显示页面之前完成自举工作（这可以减少分散渲染中移动部件的数量）

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

Answer 3

使用 AngularJS 1.7.2 和页面控制器（每个网页都有其自己的控制器）

首先进入 Factory 视图：

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;
});

在一个名为 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();
        }
    };
}

现在通过html端查看源代码，在这里我将调用此方法。

<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>

希望它将对很多人有帮助。：D

如何在angularjs中从HTML调用工厂方法？

3 个答案: