Liên kết biến dịch vụ với chỉ thị?

Question

Tôi có một bộ điều khiển có chứa một chức năng lấy một số dữ liệu từ máy chủ. Tôi lưu trữ dữ liệu đó trong một biến dịch vụ. Dịch vụ này sau đó được tiêm vào một chỉ thị. Tôi muốn chỉ thị được tự động cập nhật, bất cứ khi nào chức năng này được gọi và dữ liệu được gia hạn.

điều khiển của tôi:

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

Chỉ thị:

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

Mẫu:

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

Chức năng cập nhật được gọi khi một nút được nhấp và nó cập nhật myValue đến một giá trị mới. Tôi muốn nó được tự động phản ánh trong chỉ thị.

Plunk: http://plnkr.co/edit/OUPzT4MFS32OenRIO9q4?p=preview

Answer 1

Xin xem bản demo làm việc dưới

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

Bạn có thể thử bằng cách thêm tài liệu tham khảo của dịch vụ để chỉ thị riêng của mình ..

Chỉ thị:

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

Mẫu:

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

E dit: Tôi đã đi qua plunker của bạn, và cuối cùng đã nhận nó làm việc.

Bạn có thể kiểm tra mã cập nhật here

Answer 3

@RutwickGangurde và những người khác đã có vấn đề, nếu bạn đang cố gắng đặt một biến phạm vi không phải là một đối tượng mà nó sẽ không hoạt động. Tôi đoán đó là những gì bạn đang làm trong dịch vụ của bạn:

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

và sau đó cố gắng để thiết lập nó trong chỉ thị/điều khiển:

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

sẽ không làm việc để nhận được cập nhật biến trong dịch vụ khi nó thay đổi.

Hãy thử điều này thay vì phục vụ bạn:

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

và trong chỉ thị của bạn/điều khiển:

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

và trong html của bạn:

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

tôi đã có thể làm điều này như một nhận xét, nhưng tôi không có đủ đặc quyền nhưng vì vậy đã quyết định đăng bài như một phản hồi với một ví dụ rất ngắn gọn.