지시어에 서비스 변수를 바인드 하시겠습니까?

Question

서버에서 데이터를 가져 오는 함수가 포함 된 컨트롤러가 있습니다. 그 데이터를 서비스 변수에 저장합니다. 이 서비스는 지시문에 삽입됩니다. 이 함수가 호출되고 데이터가 갱신 될 때마다 지시문을 자동으로 업데이트하려고합니다.

내 컨트롤러 :

angular 
.module('myApp') 
.controller('myCtrl', ['$scope', 'SomeService', function($scope, SomeService) { 
    $scope.update = function() { 
     SomeService.myValue = 100; 
    } 
}]); 

이 지침 :

angular.module('myApp') 
.directive('myDirective', ['SomeService', function(SomeService) { 
    return { 
     templateUrl : 'views/myDirective.html', 
     restrict : 'E', 
     scope : false, 
     controller : function($scope) { 
      this.myValue = SomeService.myValue; 
     } 
    }; 
}]); 

템플릿 :

<div> 
    {{ myValue }} 
</div> 

업데이트 기능은 버튼을 클릭 할 때 호출과이에 myValue를 업데이트한다 새로운 가치. 지시어에 자동으로 반영되기를 바랍니다.

쿵하는 소리 : http://plnkr.co/edit/OUPzT4MFS32OenRIO9q4?p=preview

Answer 1

을 확인할 수 있습니다

var app = angular.module('app', []); 
 

 
app.controller('MainCtrl', function($scope, SomeService) { 
 
    $scope.name = SomeService.data; 
 

 
    $scope.update = function() { 
 

 
    $scope.name.myValue += 1; 
 
    } 
 

 
}); 
 

 
app.factory('SomeService', function() { 
 
    var data = { 
 

 
    myValue: 0 
 

 
    }; 
 

 
    return { 
 

 
    data: data 
 

 
    } 
 
}); 
 

 

 
app.directive('myDirective', ['SomeService', 
 
    function(SomeService) { 
 
    return { 
 
     templateUrl: 'myDirective.html', 
 
     restrict: 'EA', 
 
     scope: false, 
 
     link: function(scope, elem, attr) { 
 

 
     scope.data = SomeService.data 
 

 
     } 
 
    }; 
 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="MainCtrl"> 
 
    <p>My Value: {{name.myValue}}</p> 
 
    <button ng-click="update()">Click</button> 
 
    <hr/> 
 
    <div my-directive></div> 
 

 
    <script type="text/ng-template" id="myDirective.html"> 
 
     <h3>My Directive</h3> 
 
     <p>Value: {{data.myValue}}</p> 
 
    </script> 
 
    </div> 
 
</div>

Answer 2

당신은 지시어 자체 서비스의 참조를 추가하여 시도 할 수 있습니다

..

이 지침 :

angular.module('myApp') 
.directive('myDirective', ['SomeService', function(SomeService) { 
    return { 
     templateUrl : 'views/myDirective.html', 
     restrict : 'E', 
     scope : false, 
     controller : function($scope) { 
      this.SomeService = SomeService; 
     } 
    }; 
}]); 

템플릿 :

<div> 
    {{ SomeService.myValue }} 
</div> 

E dit : 나는 귀하의 plunker 통해 갔다 하 고 마침내 작동했습니다.

당신은 아래 작업 데모를 참조하십시오 업데이트 된 코드 here

Answer 3

@RutwickGangurde 당신이하려고하는 경우, 문제가 된 사람들 작동하지 않는 객체가 아닌 범위 변수를 설정하십시오. 이 지침/컨트롤러를 설정하려고 다음

... 
this.myVar = true; 
... 

과 : 나는 당신이 현재 서비스하고있는 무엇을 추측하고있어 업데이트 된 변수를 얻기를 위해 작동하지 않습니다

... 
scope.myVar = myService.myVar; 
... 

서비스가 변경 될 때

대신 서비스에서 이것을 시도 :

... 
scope.myValue = myService.myObj; 
... 

하고 HTML에서 :

... 
this.myObj = {}; 
this.myObj.myVar = true; 
... 

및 지침/컨트롤러

는

... 
{{ myValue.myVar }} 
... 

난으로 이것을 만들었을 것입니다 코멘트가 있지만 충분한 권한이 없기 때문에 간단한 예제로 답변으로 게시하기로 결정했습니다.