AngularJS lie la variable du service au contrôleur

Question

Puis-je lier uniquement la variable (pas l'objet) du service au contrôleur?

Pour objet de liaison, il fonctionne (à partir this answer):

<div ng-controller="myCtrl1"> 
    1st Controller 
    <input type="text" ng-model="model1.prop1"/> 
    <input type="text" ng-model="model1.prop2"/> 
</div> 
<div ng-controller="myCtrl2"> 
    2nd Controller 
    <input type="text" ng-model="model2.prop1"/> 
    <input type="text" ng-model="model2.prop2"/> 
</div> 

app.service('dataService', function() { 
    this.model = { 
    'prop1': '', 
    'prop2': '' 
    }; 
}); 

app.controller('myCtrl1', function($scope, dataService) { 
    $scope.model1 = dataService.model; 
}); 


app.controller('myCtrl2', function($scope, dataService) { 
    $scope.model2 = dataService.model; 
}); 

Demo plnkr.

Mais je n'ai besoin que d'une variable (pas d'objet avec des propriétés).

<div ng-controller="myCtrl1"> 
    1st Controller 
    <input type="text" ng-model="variable1"/> 
</div> 
<div ng-controller="myCtrl2"> 
    2nd Controller 
    <input type="text" ng-model="variable2"/> 
</div> 

app.service('dataService', function() { 
    this.variable = ''; 
}); 

app.controller('myCtrl1', function($scope, dataService) { 
    $scope.variable1 = dataService.variable; 
}); 


app.controller('myCtrl2', function($scope, dataService) { 
    $scope.variable2 = dataService.variable; 
}); 

Demo plnkr.

Cela ne fonctionne pas. Pourquoi?

Y a-t-il une bonne manière de faire cela (sans objet avec une seule propriété ou sans $watch)?

Answer 1

Il travaillera en définissant la variable de portée à l'objet dataServiceréférence et les ng-model attributs à la propriété de référence.

JS

app.controller('myCtrl1', function($scope, dataService) { 
    $scope.ds1 = dataService; 
}); 

app.controller('myCtrl2', function($scope, dataService) { 
    $scope.ds2 = dataService; 
}); 

HTML

<div ng-controller="myCtrl1"> 
    1st Controller 
    <input type="text" ng-model="ds1.variable"/> 
</div> 

<div ng-controller="myCtrl2"> 
    2nd Controller 
    <input type="text" ng-model="ds2.variable"/> 
</div> 

La règle de base avec ng-model est toujours inclure un "point".

Le DEMO on PLNKR.

Answer 2

Vous devez utiliser un objet comme ceci: Demo

app.service('dataService', function() { 
    this.variable = {a:''}; 
});