Ich versuche herauszufinden, wie Sie richtig mit dem Binden umgehen, wenn meine Daten in einem Dienst gespeichert sind.

Ich kann Dinge zum Laufen bringen, wenn der Service in den Bereich $ gestellt wird und dann die Vorlagen direkt eingebunden werden, aber das scheint eine wirklich schlechte Idee zu sein.

Ich möchte es grundsätzlich so haben, dass meine Ansichten / Controller den Status in einem Dienst problemlos ändern können und dies überall wiedergeben.

Es fühlt sich an, als ob ich in der Lage sein sollte, etwas wie das Folgende zu tun, aber es funktioniert nicht (http://jsfiddle.net/aidankane/AtRVD/1/).

HTML

<div ng-controller="MyCtl">
    <select ng-model="drawing" ng-options="d.file for d in drawings"></select>
</div>
<div ng-controller="MyOtherCtl">
    {{ drawing }}
</div>

JS

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

myApp.factory('myService', function(){
    var me = {
        drawings: [{'file':'a'}, {'file':'b'}]
    };
    // selected drawing
    me.drawing = me.drawings[0];
    return me;
});

function MyCtl($scope, myService){
    // can do:
    // $scope.mys = myService;
    // and then in html ng-model="mys.drawing"
    // but that seems wrong

    $scope.drawings = myService.drawings;
    $scope.drawing = myService.drawing;

    // can I not do this? it doesn't seem to work anyway...
    $scope.$watch('drawing', function(drawing){
        myService.drawing = drawing;
    });
}

function MyOtherCtl($scope, myService){
    $scope.drawing = myService.drawing;
}

MyCtl.$inject = ['$scope', 'myService'];
MyOtherCtl.$inject = ['$scope', 'myService'];