将服务变量绑定到指令？

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更新为新值.我希望它能自动反映在指令中.

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