У меня есть служба, скажи:

factory('aService', ['$rootScope', '$resource', function ($rootScope, $resource) {
  var service = {
    foo: []
  };

  return service;
}]);

И я хотел бы использовать fooдля управления списком, который отображается в HTML:

<div ng-controller="FooCtrl">
  <div ng-repeat="item in foo">{{ item }}</div>
</div>

Чтобы контроллер мог определить, когда aService.fooобновляется, я собрал воедино этот шаблон, где я добавляю aService к контроллеру $scopeи затем использую $scope.$watch():

function FooCtrl($scope, aService) {                                                                                                                              
  $scope.aService = aService;
  $scope.foo = aService.foo;

  $scope.$watch('aService.foo', function (newVal, oldVal, scope) {
    if(newVal) { 
      scope.foo = newVal;
    }
  });
}

Это кажется длинным, и я повторял это на каждом контроллере, который использует переменные службы. Есть ли лучший способ для просмотра общих переменных?

Вы всегда можете использовать старый добрый шаблон наблюдателя, если хотите избежать тирании и накладных расходов $watch.

В сервисе:

factory('aService', function() {
  var observerCallbacks = [];

  //register an observer
  this.registerObserverCallback = function(callback){
    observerCallbacks.push(callback);
  };

  //call this when you know 'foo' has been changed
  var notifyObservers = function(){
    angular.forEach(observerCallbacks, function(callback){
      callback();
    });
  };

  //example of when you may want to notify observers
  this.foo = someNgResource.query().$then(function(){
    notifyObservers();
  });
});

И в контроллере:

function FooCtrl($scope, aService){
  var updateFoo = function(){
    $scope.foo = aService.foo;
  };

  aService.registerObserverCallback(updateFoo);
  //service now in control of updating foo
};

В подобном сценарии, когда несколько / неизвестные объекты могут быть заинтересованы в изменениях, используйте $rootScope.$broadcastизменяемый элемент.

Вместо того, чтобы создавать свой собственный реестр слушателей (которые должны быть очищены при различных $ разрушениях), вы должны быть в состоянии $broadcastот рассматриваемой службы.

Вы по-прежнему должны кодировать $onобработчики в каждом слушателе, но шаблон не связан с несколькими вызовами $digestи, таким образом, исключает риск продолжительных наблюдателей.

Таким образом, слушатели также могут приходить и уходить из DOM и / или других дочерних областей, не меняя при этом службу.

** обновление: примеры **

Широковещательные рассылки имеют смысл в «глобальных» сервисах, которые могут повлиять на множество других вещей в вашем приложении. Хорошим примером является служба пользователя, в которой может иметь место ряд событий, таких как вход в систему, выход из системы, обновление, ожидание и т. Д. Я считаю, что именно здесь широковещательные рассылки имеют смысл, поскольку любая область может прослушивать событие без даже внедряя сервис, и ему не нужно оценивать какие-либо выражения или результаты кэширования для проверки изменений. Он просто срабатывает и забывает (поэтому убедитесь, что это уведомление о том, что нужно забыть, а не то, что требует действий)

.factory('UserService', [ '$rootScope', function($rootScope) {
   var service = <whatever you do for the object>

   service.save = function(data) {
     .. validate data and update model ..
     // notify listeners and provide the data that changed [optional]
     $rootScope.$broadcast('user:updated',data);
   }

   // alternatively, create a callback function and $broadcast from there if making an ajax call

   return service;
}]);

Приведенный выше сервис будет транслировать сообщение во все области, когда функция save () завершится и данные будут действительными. В качестве альтернативы, если это $ ресурс или ajax-представление, переместите широковещательный вызов в обратный вызов, чтобы он срабатывал при ответе сервера. Широковещательные рассылки особенно подходят этому шаблону, потому что каждый слушатель просто ожидает события без необходимости проверять область действия каждого отдельного $ digest. Слушатель будет выглядеть так:

.controller('UserCtrl', [ 'UserService', '$scope', function(UserService, $scope) {

  var user = UserService.getUser();

  // if you don't want to expose the actual object in your scope you could expose just the values, or derive a value for your purposes
   $scope.name = user.firstname + ' ' +user.lastname;

   $scope.$on('user:updated', function(event,data) {
     // you could inspect the data to see if what you care about changed, or just update your own scope
     $scope.name = user.firstname + ' ' + user.lastname;
   });

   // different event names let you group your code and logic by what happened
   $scope.$on('user:logout', function(event,data) {
     .. do something differently entirely ..
   });

 }]);

Одним из преимуществ этого является устранение нескольких часов. Если бы вы комбинировали поля или извлекали значения, как в примере выше, вам бы пришлось следить за свойствами как имени, так и фамилии. Наблюдение за функцией getUser () будет работать только в том случае, если пользовательский объект будет заменен при обновлении, и не будет срабатывать, если пользовательский объект просто обновит свои свойства. В этом случае вам придется сделать глубокие часы, и это более интенсивно.

$ broadcast отправляет сообщение из области, к которой оно обращено, в любые дочерние области. Поэтому вызов его из $ rootScope будет срабатывать во всех областях. Например, если вы будете транслировать $ из области видимости вашего контроллера, она будет срабатывать только в областях, которые наследуются от области видимости вашего контроллера. $ emit идет в противоположном направлении и ведет себя аналогично событию DOM в том смысле, что оно всплывает в цепочку областей видимости.

Имейте в виду, что есть сценарии, в которых $ broadcast имеет большой смысл, и есть сценарии, в которых $ watch является лучшим вариантом, особенно если он находится в изолированной области с очень конкретным выражением наблюдения.

Я использую такой же подход, как @dtheodot, но использую угловое обещание вместо передачи обратных вызовов

app.service('myService', function($q) {
    var self = this,
        defer = $q.defer();

    this.foo = 0;

    this.observeFoo = function() {
        return defer.promise;
    }

    this.setFoo = function(foo) {
        self.foo = foo;
        defer.notify(self.foo);
    }
})

Тогда везде, где просто использовать myService.setFoo(foo)метод для обновления fooна службе. В вашем контроллере вы можете использовать его как:

myService.observeFoo().then(null, null, function(foo){
    $scope.foo = foo;
})

Первые два аргумента - thenэто обратные вызовы об успехе и ошибке, третий - обратный вызов уведомления.

Ссылка для $ q.

Без часов или обратного вызова наблюдателя ( http://jsfiddle.net/zymotik/853wvv7s/ ):

JavaScript:

angular.module("Demo", [])
    .factory("DemoService", function($timeout) {

        function DemoService() {
            var self = this;
            self.name = "Demo Service";

            self.count = 0;

            self.counter = function(){
                self.count++;
                $timeout(self.counter, 1000);
            }

            self.addOneHundred = function(){
                self.count+=100;
            }

            self.counter();
        }

        return new DemoService();

    })
    .controller("DemoController", function($scope, DemoService) {

        $scope.service = DemoService;

        $scope.minusOneHundred = function() {
            DemoService.count -= 100;
        }

    });

HTML

<div ng-app="Demo" ng-controller="DemoController">
    <div>
        <h4>{{service.name}}</h4>
        <p>Count: {{service.count}}</p>
    </div>
</div>

Этот JavaScript работает, когда мы передаем объект обратно из сервиса, а не значение. Когда объект JavaScript возвращается из службы, Angular добавляет наблюдение ко всем его свойствам.

Также обратите внимание, что я использую 'var self = this', так как мне нужно сохранять ссылку на исходный объект при выполнении $ timeout, иначе 'this' будет ссылаться на объект окна.

Я наткнулся на этот вопрос в поисках чего-то похожего, но думаю, что оно заслуживает подробного объяснения происходящего, а также некоторых дополнительных решений.

Когда угловое выражение, такое как то, которое вы использовали, присутствует в HTML, Angular автоматически устанавливает $watchдля $scope.fooи обновляет HTML всякий раз, когда $scope.fooизменяется.

<div ng-controller="FooCtrl">
  <div ng-repeat="item in foo">{{ item }}</div>
</div>

Непроизносимая проблема заключается в том, что одна из двух вещей влияет на то aService.foo , что изменения не обнаруживаются. Эти две возможности:

1. aService.foo каждый раз устанавливается новый массив, что делает ссылку на него устаревшей.
2. aService.fooобновляется таким образом, чтобы $digestцикл не запускался при обновлении.

Проблема 1: устаревшие ссылки

Рассматривая первую возможность, предполагая, $digestчто применяется a , если бы aService.fooвсегда был один и тот же массив, автоматически заданный набор $watchобнаружил бы изменения, как показано в фрагменте кода ниже.

Решение 1-a: убедитесь, что массив или объект является одним и тем же объектом при каждом обновлении

angular.module('myApp', [])
  .factory('aService', [
    '$interval',
    function($interval) {
      var service = {
        foo: []
      };

      // Create a new array on each update, appending the previous items and 
      // adding one new item each time
      $interval(function() {
        if (service.foo.length < 10) {
          var newArray = []
          Array.prototype.push.apply(newArray, service.foo);
          newArray.push(Math.random());
          service.foo = newArray;
        }
      }, 1000);

      return service;
    }
  ])
  .factory('aService2', [
    '$interval',
    function($interval) {
      var service = {
        foo: []
      };

      // Keep the same array, just add new items on each update
      $interval(function() {
        if (service.foo.length < 10) {
          service.foo.push(Math.random());
        }
      }, 1000);

      return service;
    }
  ])
  .controller('FooCtrl', [
    '$scope',
    'aService',
    'aService2',
    function FooCtrl($scope, aService, aService2) {
      $scope.foo = aService.foo;
      $scope.foo2 = aService2.foo;
    }
  ]);

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="FooCtrl">
    <h1>Array changes on each update</h1>
    <div ng-repeat="item in foo">{{ item }}</div>
    <h1>Array is the same on each udpate</h1>
    <div ng-repeat="item in foo2">{{ item }}</div>
  </div>
</body>

</html>

Как вы можете видеть, ng-repeat, предположительно прикрепленный к aService.foo, не обновляется при aService.fooизменениях, но ng-repeat, прикрепленный к, aService2.foo делает . Это потому, что наша ссылка на aService.fooустарела, а наша ссылка на aService2.fooнет. Мы создали ссылку на исходный массив with $scope.foo = aService.foo;, который затем был отброшен службой при следующем обновлении, что означает, что мы $scope.fooбольше не ссылаемся на массив, который нам нужен.

Однако, хотя есть несколько способов убедиться, что исходная ссылка сохраняется в такте, иногда может потребоваться изменить объект или массив. Или что, если свойство service ссылается на примитив, такой как Stringили Number? В этих случаях мы не можем просто полагаться на ссылку. Так что можно делать?

Несколько ответов, приведенных ранее, уже дают некоторые решения этой проблемы. Тем не менее, я лично за использование простого метода, предложенного Jin и thetallweeks в комментариях:

просто сослаться на aService.foo в HTML-разметке

Решение 1-b: прикрепите сервис к области действия и укажите ссылку {service}.{property}в HTML.

Смысл, просто сделай это:

HTML:

<div ng-controller="FooCtrl">
  <div ng-repeat="item in aService.foo">{{ item }}</div>
</div>

JS:

function FooCtrl($scope, aService) {
    $scope.aService = aService;
}

angular.module('myApp', [])
  .factory('aService', [
    '$interval',
    function($interval) {
      var service = {
        foo: []
      };

      // Create a new array on each update, appending the previous items and 
      // adding one new item each time
      $interval(function() {
        if (service.foo.length < 10) {
          var newArray = []
          Array.prototype.push.apply(newArray, service.foo);
          newArray.push(Math.random());
          service.foo = newArray;
        }
      }, 1000);

      return service;
    }
  ])
  .controller('FooCtrl', [
    '$scope',
    'aService',
    function FooCtrl($scope, aService) {
      $scope.aService = aService;
    }
  ]);

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="FooCtrl">
    <h1>Array changes on each update</h1>
    <div ng-repeat="item in aService.foo">{{ item }}</div>
  </div>
</body>

</html>

Таким образом, $watchбудет решено aService.fooдля каждого $digest, который получит правильно обновленное значение.

Это своего рода то, что вы пытались сделать с помощью обходного пути, но в гораздо меньшей степени. Вы добавили ненужные $watchв контроллере , который явно ставит fooна $scopeвсякий раз , когда она меняется. Вам не нужно это дополнительное, $watchкогда вы присоединяете aServiceвместо aService.fooк $scopeи явно привязываете aService.fooв разметке.

Теперь это все хорошо, если предположить, что применяется $digestцикл. В моих примерах выше я использовал $intervalсервис Angular для обновления массивов, который автоматически запускает $digestцикл после каждого обновления. Но что, если служебные переменные (по какой-либо причине) не обновляются в «угловом мире». Другими словами, мы DonT есть $digestцикл активируется автоматически , когда меняется свойство службы?

Проблема 2: Отсутствует $digest

Многие решения здесь решат эту проблему, но я согласен с Code Whisperer :

Причина, по которой мы используем фреймворк, такой как Angular, заключается в том, чтобы не создавать собственные шаблоны наблюдателей.

Поэтому я предпочел бы продолжать использовать aService.fooссылку в разметке HTML, как показано во втором примере выше, и не должен регистрировать дополнительный обратный вызов в контроллере.

Решение 2. Используйте сеттер и геттер с $rootScope.$apply()

Я был удивлен, что никто еще не предложил использовать сеттер и геттер . Эта возможность была введена в ECMAScript5 и, таким образом, существует уже много лет. Конечно, это означает, что если по какой-либо причине вам необходимо поддерживать действительно старые браузеры, то этот метод не будет работать, но я чувствую, что методы получения и установки в JavaScript значительно недоиспользуются. В данном конкретном случае они могут быть весьма полезны:

factory('aService', [
  '$rootScope',
  function($rootScope) {
    var realFoo = [];

    var service = {
      set foo(a) {
        realFoo = a;
        $rootScope.$apply();
      },
      get foo() {
        return realFoo;
      }
    };
  // ...
}

angular.module('myApp', [])
  .factory('aService', [
    '$rootScope',
    function($rootScope) {
      var realFoo = [];

      var service = {
        set foo(a) {
          realFoo = a;
          $rootScope.$apply();
        },
        get foo() {
          return realFoo;
        }
      };

      // Create a new array on each update, appending the previous items and 
      // adding one new item each time
      setInterval(function() {
        if (service.foo.length < 10) {
          var newArray = [];
          Array.prototype.push.apply(newArray, service.foo);
          newArray.push(Math.random());
          service.foo = newArray;
        }
      }, 1000);

      return service;
    }
  ])
  .controller('FooCtrl', [
    '$scope',
    'aService',
    function FooCtrl($scope, aService) {
      $scope.aService = aService;
    }
  ]);

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="FooCtrl">
    <h1>Using a Getter/Setter</h1>
    <div ng-repeat="item in aService.foo">{{ item }}</div>
  </div>
</body>

</html>

Здесь я добавил «частный» переменную в функции службы: realFoo. Получить обновляется и извлекаться с использованием get foo()и set foo()функции соответственно на serviceобъекте.

Обратите внимание на использование $rootScope.$apply()в функции set. Это гарантирует, что Angular будет в курсе любых изменений service.foo. Если вы получаете ошибки 'inprog', посмотрите эту полезную справочную страницу , или если вы используете Angular> = 1.3, вы можете просто использовать $rootScope.$applyAsync().

Также будьте осторожны с этим, если aService.fooобновляется очень часто, так как это может значительно повлиять на производительность. Если производительность будет проблемой, вы можете установить шаблон наблюдателя, подобный другим ответам здесь, используя установщик.

Насколько я могу сказать, вам не нужно делать что-то настолько сложное, как это. Вы уже присвоили foo из службы своей области видимости, и поскольку foo является массивом (и, в свою очередь, объектом, он назначается по ссылке!). Итак, все, что вам нужно сделать, это что-то вроде этого:

function FooCtrl($scope, aService) {                                                                                                                              
  $scope.foo = aService.foo;

 }

Если какая-то другая переменная в этом же Ctrl зависит от изменения foo, тогда да, вам понадобятся часы для наблюдения за foo и внесения изменений в эту переменную. Но пока это просто просмотр ссылок не требуется. Надеюсь это поможет.

Вы можете вставить сервис в $ rootScope и посмотреть:

myApp.run(function($rootScope, aService){
    $rootScope.aService = aService;
    $rootScope.$watch('aService', function(){
        alert('Watch');
    }, true);
});

В вашем контроллере:

myApp.controller('main', function($scope){
    $scope.aService.foo = 'change';
});

Другой вариант - использовать внешнюю библиотеку, например: https://github.com/melanke/Watch.JS.

Работает с: IE 9+, FF 4+, SF 5+, WebKit, CH 7+, OP 12+, BESEN, Node.JS, Rhino 1.7+

Вы можете наблюдать изменения одного, многих или всех атрибутов объекта.

Пример:

var ex3 = {
    attr1: 0,
    attr2: "initial value of attr2",
    attr3: ["a", 3, null]
};   
watch(ex3, function(){
    alert("some attribute of ex3 changes!");
});
ex3.attr3.push("new value");​

Вы можете наблюдать за изменениями внутри самой фабрики, а затем транслировать изменения

angular.module('MyApp').factory('aFactory', function ($rootScope) {
    // Define your factory content
    var result = {
        'key': value
    };

    // add a listener on a key        
    $rootScope.$watch(function () {
        return result.key;
    }, function (newValue, oldValue, scope) {
        // This is called after the key "key" has changed, a good idea is to broadcast a message that key has changed
        $rootScope.$broadcast('aFactory:keyChanged', newValue);
    }, true);

    return result;
});

Тогда в вашем контроллере:

angular.module('MyApp').controller('aController', ['$rootScope', function ($rootScope) {

    $rootScope.$on('aFactory:keyChanged', function currentCityChanged(event, value) {
        // do something
    });
}]);

Таким образом, вы помещаете весь соответствующий заводской код в его описание, тогда вы можете полагаться только на трансляцию извне

== == ОБНОВЛЕНО

Очень просто сейчас в $ watch.

Ручка здесь .

HTML:

<div class="container" data-ng-app="app">

  <div class="well" data-ng-controller="FooCtrl">
    <p><strong>FooController</strong></p>
    <div class="row">
      <div class="col-sm-6">
        <p><a href="" ng-click="setItems([ { name: 'I am single item' } ])">Send one item</a></p>
        <p><a href="" ng-click="setItems([ { name: 'Item 1 of 2' }, { name: 'Item 2 of 2' } ])">Send two items</a></p>
        <p><a href="" ng-click="setItems([ { name: 'Item 1 of 3' }, { name: 'Item 2 of 3' }, { name: 'Item 3 of 3' } ])">Send three items</a></p>
      </div>
      <div class="col-sm-6">
        <p><a href="" ng-click="setName('Sheldon')">Send name: Sheldon</a></p>
        <p><a href="" ng-click="setName('Leonard')">Send name: Leonard</a></p>
        <p><a href="" ng-click="setName('Penny')">Send name: Penny</a></p>
      </div>
    </div>
  </div>

  <div class="well" data-ng-controller="BarCtrl">
    <p><strong>BarController</strong></p>
    <p ng-if="name">Name is: {{ name }}</p>
    <div ng-repeat="item in items">{{ item.name }}</div>
  </div>

</div>

JavaScript:

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

app.factory('PostmanService', function() {
  var Postman = {};
  Postman.set = function(key, val) {
    Postman[key] = val;
  };
  Postman.get = function(key) {
    return Postman[key];
  };
  Postman.watch = function($scope, key, onChange) {
    return $scope.$watch(
      // This function returns the value being watched. It is called for each turn of the $digest loop
      function() {
        return Postman.get(key);
      },
      // This is the change listener, called when the value returned from the above function changes
      function(newValue, oldValue) {
        if (newValue !== oldValue) {
          // Only update if the value changed
          $scope[key] = newValue;
          // Run onChange if it is function
          if (angular.isFunction(onChange)) {
            onChange(newValue, oldValue);
          }
        }
      }
    );
  };
  return Postman;
});

app.controller('FooCtrl', ['$scope', 'PostmanService', function($scope, PostmanService) {
  $scope.setItems = function(items) {
    PostmanService.set('items', items);
  };
  $scope.setName = function(name) {
    PostmanService.set('name', name);
  };
}]);

app.controller('BarCtrl', ['$scope', 'PostmanService', function($scope, PostmanService) {
  $scope.items = [];
  $scope.name = '';
  PostmanService.watch($scope, 'items');
  PostmanService.watch($scope, 'name', function(newVal, oldVal) {
    alert('Hi, ' + newVal + '!');
  });
}]);

Основываясь на ответе dtheodor, вы можете использовать что-то похожее на приведенное ниже, чтобы не забыть отменить регистрацию обратного вызова ... Некоторые могут возражать против передачи $scopeслужбы.

factory('aService', function() {
  var observerCallbacks = [];

  /**
   * Registers a function that will be called when
   * any modifications are made.
   *
   * For convenience the callback is called immediately after registering
   * which can be prevented with `preventImmediate` param.
   *
   * Will also automatically unregister the callback upon scope destory.
   */
  this.registerObserver = function($scope, cb, preventImmediate){
    observerCallbacks.push(cb);

    if (preventImmediate !== true) {
      cb();
    }

    $scope.$on('$destroy', function () {
      observerCallbacks.remove(cb);
    });
  };

  function notifyObservers() {
    observerCallbacks.forEach(function (cb) {
      cb();
    });
  };

  this.foo = someNgResource.query().$then(function(){
    notifyObservers();
  });
});

Array.remove - это метод расширения, который выглядит следующим образом:

/**
 * Removes the given item the current array.
 *
 * @param  {Object}  item   The item to remove.
 * @return {Boolean}        True if the item is removed.
 */
Array.prototype.remove = function (item /*, thisp */) {
    var idx = this.indexOf(item);

    if (idx > -1) {
        this.splice(idx, 1);

        return true;
    }
    return false;
};

Вот мой общий подход.

mainApp.service('aService',[function(){
        var self = this;
        var callbacks = {};

        this.foo = '';

        this.watch = function(variable, callback) {
            if (typeof(self[variable]) !== 'undefined') {
                if (!callbacks[variable]) {
                    callbacks[variable] = [];
                }
                callbacks[variable].push(callback);
            }
        }

        this.notifyWatchersOn = function(variable) {
            if (!self[variable]) return;
            if (!callbacks[variable]) return;

            angular.forEach(callbacks[variable], function(callback, key){
                callback(self[variable]);
            });
        }

        this.changeFoo = function(newValue) {
            self.foo = newValue;
            self.notifyWatchersOn('foo');
        }

    }]);

В вашем контроллере

function FooCtrl($scope, aService) {
    $scope.foo;

    $scope._initWatchers = function() {
        aService.watch('foo', $scope._onFooChange);
    }

    $scope._onFooChange = function(newValue) {
        $scope.foo = newValue;
    }

    $scope._initWatchers();

}

FooCtrl.$inject = ['$scope', 'aService'];

Для тех, кто, как я, просто ищет простое решение, это делает почти то же, что вы ожидаете от использования обычных $ watch в контроллерах. Единственное отличие состоит в том, что он оценивает строку в контексте javascript, а не в определенной области видимости. Вам придется внедрить $ rootScope в ваш сервис, хотя он используется только для правильного подключения к циклам дайджеста.

function watch(target, callback, deep) {
    $rootScope.$watch(function () {return eval(target);}, callback, deep);
};

Столкнувшись с очень похожей проблемой, я посмотрел функцию в области видимости и заставил функцию возвращать переменную службы. Я создал JS Fiddle . Вы можете найти код ниже.

    var myApp = angular.module("myApp",[]);

myApp.factory("randomService", function($timeout){
    var retValue = {};
    var data = 0;

    retValue.startService = function(){
        updateData();
    }

    retValue.getData = function(){
        return data;
    }

    function updateData(){
        $timeout(function(){
            data = Math.floor(Math.random() * 100);
            updateData()
        }, 500);
    }

    return retValue;
});

myApp.controller("myController", function($scope, randomService){
    $scope.data = 0;
    $scope.dataUpdated = 0;
    $scope.watchCalled = 0;
    randomService.startService();

    $scope.getRandomData = function(){
        return randomService.getData();    
    }

    $scope.$watch("getRandomData()", function(newValue, oldValue){
        if(oldValue != newValue){
            $scope.data = newValue;
            $scope.dataUpdated++;
        }
            $scope.watchCalled++;
    });
});

Я пришел к этому вопросу, но оказалось, что моя проблема в том, что я использовал setInterval, когда я должен был использовать поставщика угловых $ интервалов. Это также относится и к setTimeout (вместо этого используйте $ timeout). Я знаю, что это не ответ на вопрос ОП, но это могло бы помочь некоторым, поскольку помогло мне.

В другом потоке я нашел действительно отличное решение с похожей проблемой, но совершенно другим подходом. Источник: AngularJS: $ watch в директиве не работает при изменении значения $ rootScope

В принципе решение там говорит НЕ использовать , $watchпоскольку это очень тяжелое решение. Вместо этого они предлагают использовать $emitи $on.

Моя проблема состояла в том, чтобы наблюдать переменную в моем сервисе и реагировать в директиве . А с вышеуказанным способом это очень просто!

Пример моего модуля / сервиса:

angular.module('xxx').factory('example', function ($rootScope) {
    var user;

    return {
        setUser: function (aUser) {
            user = aUser;
            $rootScope.$emit('user:change');
        },
        getUser: function () {
            return (user) ? user : false;
        },
        ...
    };
});

Поэтому в основном я смотреть My user - всякий раз , когда он установлен на новое значение I статус.$emituser:change

Теперь в моем случае в директиве я использовал:

angular.module('xxx').directive('directive', function (Auth, $rootScope) {
    return {
        ...
        link: function (scope, element, attrs) {
            ...
            $rootScope.$on('user:change', update);
        }
    };
});

Сейчас в директиве слушаю на свое $rootScopeи на данное изменение - реагирую соответственно. Очень легко и элегантно!

// сервис: (здесь ничего особенного)

myApp.service('myService', function() {
  return { someVariable:'abc123' };
});

// ctrl:

myApp.controller('MyCtrl', function($scope, myService) {

  $scope.someVariable = myService.someVariable;

  // watch the service and update this ctrl...
  $scope.$watch(function(){
    return myService.someVariable;
  }, function(newValue){
    $scope.someVariable = newValue;
  });
});

Немного некрасиво, но я добавил регистрацию переменных области видимости в свой сервис для переключения:

myApp.service('myService', function() {
    var self = this;
    self.value = false;
    self.c2 = function(){};
    self.callback = function(){
        self.value = !self.value; 
       self.c2();
    };

    self.on = function(){
        return self.value;
    };

    self.register = function(obj, key){ 
        self.c2 = function(){
            obj[key] = self.value; 
            obj.$apply();
        } 
    };

    return this;
});

И тогда в контроллере:

function MyCtrl($scope, myService) {
    $scope.name = 'Superhero';
    $scope.myVar = false;
    myService.register($scope, 'myVar');
}

Взгляните на этот поршень: это самый простой пример

http://jsfiddle.net/HEdJF/

<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="Data.FirstName"><!-- Input entered here -->
        <br>Input is : <strong>{{Data.FirstName}}</strong><!-- Successfully updates here -->
    </div>
    <hr>
    <div ng-controller="SecondCtrl">
        Input should also be here: {{Data.FirstName}}<!-- How do I automatically updated it here? -->
    </div>
</div>



// declare the app with no dependencies
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
   return { FirstName: '' };
});

myApp.controller('FirstCtrl', function( $scope, Data ){
    $scope.Data = Data;
});

myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.Data = Data;
});

Я видел несколько ужасных шаблонов наблюдателей, которые вызывают утечки памяти в больших приложениях.

Я мог бы немного опоздать, но это так просто.

Функция наблюдения отслеживает изменения ссылок (примитивные типы), если вы хотите наблюдать что-то вроде массива push, просто используйте:

someArray.push(someObj); someArray = someArray.splice(0);

Это обновит ссылку и обновит часы из любой точки мира. Включая метод получения услуг. Все, что является примитивом, будет обновлено автоматически.

Я опоздал на часть, но я нашел более хороший способ сделать это, чем ответ, опубликованный выше. Вместо того, чтобы назначать переменную для хранения значения служебной переменной, я создал функцию, прикрепленную к области, которая возвращает служебную переменную.

контроллер

$scope.foo = function(){
 return aService.foo;
}

Я думаю, что это будет делать то, что вы хотите. Мой контроллер продолжает проверять ценность моего сервиса с этой реализацией. Честно говоря, это намного проще, чем выбранный ответ.

Я написал две простые утилиты, которые помогают мне отслеживать изменения свойств сервиса.

Если вы хотите пропустить длинное объяснение, вы можете перейти прямо к jsfiddle

1. WatchObj

mod.service('WatchObj', ['$rootScope', WatchObjService]);

function WatchObjService($rootScope) {
  // returns watch function
  // obj: the object to watch for
  // fields: the array of fields to watch
  // target: where to assign changes (usually it's $scope or controller instance)
  // $scope: optional, if not provided $rootScope is use
  return function watch_obj(obj, fields, target, $scope) {
    $scope = $scope || $rootScope;
    //initialize watches and create an array of "unwatch functions"
    var watched = fields.map(function(field) {
      return $scope.$watch(
        function() {
          return obj[field];
        },
        function(new_val) {
          target[field] = new_val;
        }
      );
    });
    //unregister function will unregister all our watches
    var unregister = function unregister_watch_obj() {
      watched.map(function(unregister) {
        unregister();
      });
    };
    //automatically unregister when scope is destroyed
    $scope.$on('$destroy', unregister);
    return unregister;
  };
}

Эта служба используется в контроллере следующим образом. Предположим, у вас есть служба «testService» со свойствами «prop1», «prop2», «prop3». Вы хотите посмотреть и назначить область «prop1» и «prop2». С сервисом часов это будет выглядеть так:

app.controller('TestWatch', ['$scope', 'TestService', 'WatchObj', TestWatchCtrl]);

function TestWatchCtrl($scope, testService, watch) {
  $scope.prop1 = testService.prop1;
  $scope.prop2 = testService.prop2;
  $scope.prop3 = testService.prop3;
  watch(testService, ['prop1', 'prop2'], $scope, $scope);
}

2. apply Watch obj - это прекрасно, но этого недостаточно, если у вас есть асинхронный код в вашем сервисе. Для этого случая я использую вторую утилиту, которая выглядит так:

mod.service('apply', ['$timeout', ApplyService]);

function ApplyService($timeout) {
  return function apply() {
    $timeout(function() {});
  };
}

Я бы запустил его в конце моего асинхронного кода, чтобы запустить цикл $ digest. Как это:

app.service('TestService', ['apply', TestService]);

function TestService(apply) {
  this.apply = apply;
}
TestService.prototype.test3 = function() {
  setTimeout(function() {
    this.prop1 = 'changed_test_2';
    this.prop2 = 'changed2_test_2';
    this.prop3 = 'changed3_test_2';
    this.apply(); //trigger $digest loop
  }.bind(this));
}

Итак, все это вместе будет выглядеть так (вы можете запустить его или открыть скрипку ):

// TEST app code

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

app.controller('TestWatch', ['$scope', 'TestService', 'WatchObj', TestWatchCtrl]);

function TestWatchCtrl($scope, testService, watch) {
  $scope.prop1 = testService.prop1;
  $scope.prop2 = testService.prop2;
  $scope.prop3 = testService.prop3;
  watch(testService, ['prop1', 'prop2'], $scope, $scope);
  $scope.test1 = function() {
    testService.test1();
  };
  $scope.test2 = function() {
    testService.test2();
  };
  $scope.test3 = function() {
    testService.test3();
  };
}

app.service('TestService', ['apply', TestService]);

function TestService(apply) {
  this.apply = apply;
  this.reset();
}
TestService.prototype.reset = function() {
  this.prop1 = 'unchenged';
  this.prop2 = 'unchenged2';
  this.prop3 = 'unchenged3';
}
TestService.prototype.test1 = function() {
  this.prop1 = 'changed_test_1';
  this.prop2 = 'changed2_test_1';
  this.prop3 = 'changed3_test_1';
}
TestService.prototype.test2 = function() {
  setTimeout(function() {
    this.prop1 = 'changed_test_2';
    this.prop2 = 'changed2_test_2';
    this.prop3 = 'changed3_test_2';
  }.bind(this));
}
TestService.prototype.test3 = function() {
  setTimeout(function() {
    this.prop1 = 'changed_test_2';
    this.prop2 = 'changed2_test_2';
    this.prop3 = 'changed3_test_2';
    this.apply();
  }.bind(this));
}
//END TEST APP CODE

//WATCH UTILS
var mod = angular.module('watch_utils', []);

mod.service('apply', ['$timeout', ApplyService]);

function ApplyService($timeout) {
  return function apply() {
    $timeout(function() {});
  };
}

mod.service('WatchObj', ['$rootScope', WatchObjService]);

function WatchObjService($rootScope) {
  // target not always equals $scope, for example when using bindToController syntax in 
  //directives
  return function watch_obj(obj, fields, target, $scope) {
    // if $scope is not provided, $rootScope is used
    $scope = $scope || $rootScope;
    var watched = fields.map(function(field) {
      return $scope.$watch(
        function() {
          return obj[field];
        },
        function(new_val) {
          target[field] = new_val;
        }
      );
    });
    var unregister = function unregister_watch_obj() {
      watched.map(function(unregister) {
        unregister();
      });
    };
    $scope.$on('$destroy', unregister);
    return unregister;
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class='test' ng-app="app" ng-controller="TestWatch">
  prop1: {{prop1}}
  <br>prop2: {{prop2}}
  <br>prop3 (unwatched): {{prop3}}
  <br>
  <button ng-click="test1()">
    Simple props change
  </button>
  <button ng-click="test2()">
    Async props change
  </button>
  <button ng-click="test3()">
    Async props change with apply
  </button>
</div>