С моей точки зрения, $watch было бы лучшим способом практики.

вы можете на самом деле упростить свой пример немного:

function TimerCtrl1($scope, Timer) {
  $scope.$watch( function () { return Timer.data; }, function (data) {
    $scope.lastUpdated = data.lastUpdated;
    $scope.calls = data.calls;
  }, true);
}

Это все, что вам нужно.

так как свойства обновляются одновременно, вам нужно только один часы. Кроме того, поскольку они исходят от одного, довольно маленького объекта, я изменил его, чтобы просто смотреть Timer.data собственность. Последний параметр, переданный в $watch говорит ему, чтобы проверить глубокое равенство, а не просто убедиться, что ссылка такая же.

---

чтобы обеспечить небольшой контекст, причина, по которой я предпочел бы этот метод для размещения значения службы непосредственно в области, заключается в обеспечении надлежащего разделения проблем. Ваш взгляд не должен знать ничего о ваших услугах для того, чтобы работать. Задача контроллера-склеить все вместе; его задача-получить данные из ваших сервисов и обработать их любым необходимым способом, а затем предоставить вашему взгляду любую специфику по необходимости. Но я не думаю, что его задача-пройти прямо по мнению. В противном случае, что контроллер вообще там делает? Разработчики AngularJS следовали тем же рассуждениям, когда они решили не включать какую-либо "логику" в шаблоны (например,if заявления).

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

поздно на вечеринку, но для будущих гуглеров - не используйте предоставленный ответ.

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

в приведенном выше примере, вместо привязки атрибутов сервиса,почему бы нам не предоставить услугу в область?

$scope.hello = HelloService;

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

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

последний совет: если вы тратите свое время на работу с контроллером больше, чем ваши услуги, то вы делаете это неправильно :(.

в этом конкретный демо-код, который вы предоставили, я бы рекомендовал вам сделать:

 function TimerCtrl1($scope, Timer) {
   $scope.timer = Timer;
 }
///Inside view
{{ timer.time_updated }}
{{ timer.other_property }}
etc...

Edit:

как я уже упоминал выше, вы можете контролировать поведение ваших атрибутов сервиса с помощью defineProperty

пример:

// Lets expose a property named "propertyWithSetter" on our service
// and hook a setter function that automatically saves new value to db !
Object.defineProperty(self, 'propertyWithSetter', {
  get: function() { return self.data.variable; },
  set: function(newValue) { 
         self.data.variable = newValue; 
         // let's update the database too to reflect changes in data-model !
         self.updateDatabaseWithNewData(data);
       },
  enumerable: true,
  configurable: true
});

сейчас в нашем контроллере, если мы делаем

$scope.hello = HelloService;
$scope.hello.propertyWithSetter = 'NEW VALUE';

наш сервис изменит значение propertyWithSetter, а также задать новое значение в базу данных как-то!

или мы можем принять любой подход, мы хотеть.

относятся к документация MDN на defineProperty.

Я думаю, что этот вопрос имеет контекстуальный компонент.

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

кроме того, производительность в angular основана на двух вещах. Во-первых, сколько Привязок на странице. Второй насколько дороги функции геттера. Миско говорит об этом здесь

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

как предостережение, вы не должны висеть любой свойства непосредственно с вашего $ scope. Элемент $scope переменная-это не ваша модель. Он имеет ссылки на вашу модель.

на мой взгляд, "лучшая практика" для простого излучения информации из службы вниз для просмотра:

function TimerCtrl1($scope, Timer) {
  $scope.model = {timerData: Timer.data};
};

и тогда ваш взгляд будет содержать {{model.timerData.lastupdated}}.

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

в приведенном ниже примере изменения контроллера $scope.count переменная будет автоматически отражена в сервисе count переменной.

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

код ниже можно увидеть работает на http://jsfiddle.net/xuUHS/163/

посмотреть:

<div ng-controller="ServiceCtrl">
    <p> This is my countService variable : {{count}}</p>
    <input type="number" ng-model="count">
    <p> This is my updated after click variable : {{countS}}</p>

    <button ng-click="clickC()" >Controller ++ </button>
    <button ng-click="chkC()" >Check Controller Count</button>
    </br>

    <button ng-click="clickS()" >Service ++ </button>
    <button ng-click="chkS()" >Check Service Count</button>
</div>

Сервис / Контроллер:

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

app.service('testService', function(){
    var count = 10;

    function incrementCount() {
      count++;
      return count;
    };

    function getCount() { return count; }

    return {
        get count() { return count },
        set count(val) {
            count = val;
        },
        getCount: getCount,
        incrementCount: incrementCount
    }

});

function ServiceCtrl($scope, testService)
{

    Object.defineProperty($scope, 'count', {
        get: function() { return testService.count; },
        set: function(val) { testService.count = val; },
    });

    $scope.clickC = function () {
       $scope.count++;
    };
    $scope.chkC = function () {
        alert($scope.count);
    };

    $scope.clickS = function () {
       ++testService.count;
    };
    $scope.chkS = function () {
        alert(testService.count);
    };

}

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

вот почему:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script>
<body ng-app="BindToService">

  <div ng-controller="BindToServiceCtrl as ctrl">
    ArrService.arrOne: <span ng-repeat="v in ArrService.arrOne">{{v}}</span>
    <br />
    ArrService.arrTwo: <span ng-repeat="v in ArrService.arrTwo">{{v}}</span>
    <br />
    <br />
    <!-- This is empty since $scope.arrOne never changes -->
    arrOne: <span ng-repeat="v in arrOne">{{v}}</span>
    <br />
    <!-- This is not empty since $scope.arrTwo === ArrService.arrTwo -->
    <!-- Both of them point the memory space modified by the `push` function below -->
    arrTwo: <span ng-repeat="v in arrTwo">{{v}}</span>
  </div>

  <script type="text/javascript">
    var app = angular.module("BindToService", []);

    app.controller("BindToServiceCtrl", function ($scope, ArrService) {
      $scope.ArrService = ArrService;
      $scope.arrOne = ArrService.arrOne;
      $scope.arrTwo = ArrService.arrTwo;
    });

    app.service("ArrService", function ($interval) {
      var that = this,
          i = 0;
      this.arrOne = [];
      that.arrTwo = [];

      $interval(function () {
        // This will change arrOne (the pointer).
        // However, $scope.arrOne is still same as the original arrOne.
        that.arrOne = that.arrOne.concat([i]);

        // This line changes the memory block pointed by arrTwo.
        // And arrTwo (the pointer) itself never changes.
        that.arrTwo.push(i);
        i += 1;
      }, 1000);

    });
  </script>
</body> 

вы можете играть в нее на этот plunker.

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

для привязки любых данных, которые отправляет сервис не очень хорошая идея (архитектура),но если вам это нужно больше, я предлагаю вам 2 способа сделать это

1) Вы можете получить данные не внутри вас службы.Вы можете получить данные внутри вашего контроллера / директивы, и у вас не будет проблем, чтобы привязать его в любом месте

2) Вы можете использовать события angularjs.Когда вы хотите, вы можете отправить сигнал(от $rootScope) и поймать его, где вы хотите.Вы даже можете отправить данные об этом имя события.

может быть, это может помочь вам. Если вам нужно больше примеров,вот ссылка

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

а как же

scope = _.extend(scope, ParentScope);

где ParentScope является внедренной службой?

Самые Элегантные Решения...

app.service('svc', function(){ this.attr = []; return this; });
app.controller('ctrl', function($scope, svc){
    $scope.attr = svc.attr || [];
    $scope.$watch('attr', function(neo, old){ /* if necessary */ });
});
app.run(function($rootScope, svc){
    $rootScope.svc = svc;
    $rootScope.$watch('svc', function(neo, old){ /* change the world */ });
});

кроме того, я пишу EDAs (Event-Driven Architectures), поэтому я склонен делать что-то вроде следующего [упрощенная версия]:

var Service = function Service($rootScope) {
    var $scope = $rootScope.$new(this);
    $scope.that = [];
    $scope.$watch('that', thatObserver, true);
    function thatObserver(what) {
        $scope.$broadcast('that:changed', what);
    }
};

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

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

надеюсь, что это помогает...