Programing

서비스 / 팩토리에서 컨트롤러로 변수 바인딩

crosscheck 2020. 11. 5. 07:42
반응형

서비스 / 팩토리에서 컨트롤러로 변수 바인딩


서비스에 의해 변경된 하나 이상의 컨트롤러에서 사용할 변수가 있습니다. 이 경우이 변수를 메모리에 유지하고 컨트롤러간에 공유하는 서비스를 구축했습니다.

문제는 변수가 변경 될 때마다 컨트롤러의 변수가 실시간으로 업데이트되지 않는다는 것입니다.

도움을주기 위해이 Fiddle을 만듭니다. http://jsfiddle.net/ncyVK/

--- count 값을 증가시킬 때 {{countService}}or {{countFactory}}가 업데이트되지 않습니다.

컨트롤러에서 Service / Factory 변수를 $ scope.variable에 어떻게 바인딩 할 수 있습니까? 내가 뭘 잘못하고 있니?


변수를 바인딩 할 수 없습니다. 그러나이 변수를 포함하는 변수 접근 자 또는 개체를 바인딩 할 수 있습니다. 다음은 jsfiddle 고정 입니다 .

기본적으로 현재 값을 반환 / 또는 보유 할 수있는 무언가를 범위에 전달해야합니다.

공장:

app.factory('testFactory', function(){
    var countF = 1;
    return {
        getCount : function () {

            return countF; //we need some way to access actual variable value
        },
        incrementCount:function(){
           countF++;
            return countF;
        }
    }               
});

제어 장치:

function FactoryCtrl($scope, testService, testFactory)
{
    $scope.countFactory = testFactory.getCount; //passing getter to the view
    $scope.clickF = function () {
        $scope.countF = testFactory.incrementCount();
    };
}

전망:

<div ng-controller="FactoryCtrl">

    <!--  this is now updated, note how count factory is called -->
    <p> This is my countFactory variable : {{countFactory()}}</p>

    <p> This is my updated after click variable : {{countF}}</p>

    <button ng-click="clickF()" >Factory ++ </button>
</div>

서비스에서 데이터를 바인딩하는 것은 좋지 않지만 더 이상 필요하면 다음 두 가지 방법을 제안합니다.

1) 서비스 내부가 아닌 데이터를 가져 오십시오. 컨트롤러 내부에서 데이터를 가져 오면 바인딩하는 데 문제가 없습니다.

2) AngularJs Events 기능을 사용할 수 있으며 해당 이벤트를 통해 데이터를 보낼 수도 있습니다.

여기에 예제가 더 필요하면 도움이 될 수있는 기사가 있습니다.

http://www.w3docs.com/snippets/angularjs/bind-value-between-service-and-controller-directive.html

참고 URL : https://stackoverflow.com/questions/16023451/binding-variables-from-service-factory-to-controllers

반응형