programing

HTML에서 공장 메서드를 angularjs로 호출하는 방법

mbctv 2023. 3. 12. 11:09
반응형

HTML에서 공장 메서드를 angularjs로 호출하는 방법

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에서 공장 방식을 호출하려면 어떻게 해야 하나요?

(*질문이 명확하지 않은 경우 질문 변경/수정 가능)

감사해요.

음, 그렇게 하면 안 되는데...하지만 당신이 수 있는 일은 당신의 $140에 있는 부동산에 당신의 서비스 오브젝트를 넣고 거기에서 호출하는 것입니다.

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

좀 더 일반적인 질문이 있었습니다. "페이지 로드 시 html에서 angularjs scope/factory/service를 호출하는 방법"저의 해결책은 ng-show 내에서 메서드를 호출하는 것이었습니다.

  1. 문제의 문맥을 둘러싼 가장 높은 요소에서
  2. ng-show 디렉티브를 사용하여 메서드를 호출합니다.
  3. 페이지를 표시하기 전에 메서드가 실행됩니다.
  4. 이러한 솔루션을 사용하여 페이지를 표시하기 전에 부트스트랩 작업이 완료되었는지 확인할 수도 있습니다(이것에 의해, 분산 렌더링으로 이동 부품의 수를 줄일 수 있습니다).

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

AngularJS 1.7.2 및 페이지 컨트롤러 사용(모든 웹 페이지에는 자체 컨트롤러가 있음)

먼저 공장 출하시의 예를 나타냅니다.

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

하위 컨트롤러 중 하나에서 이름이 지정됨

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

언급URL : https://stackoverflow.com/questions/16545530/how-to-call-factory-methods-from-html-in-angularjs

반응형