AngularJS: как показать API/переменные службы

Question

Попытка сделать простой пример с услугой AngularJS.

Я хочу иметь некоторые переменные и функции в моей модели данных (услуге) и через контроллер, выставить их и привязать к виду.

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

Вот пример на plunker: http://plnkr.co/edit/AKZLaT2HrkBPMkICsski?p=preview

/*****script.js******/ 
var app = angular.module('app', []); 

app.service('myService', function() { 

    // my data here 
    var text = 'text', 
     text2 = 'text2'; 

    // my function here 
    var copyText = function(){ 
     console.log('BEFORE text: '+ text + ' text2: ' + text2); 
     text2 = text; 
     console.log('AFTER text: '+ text + ' text2: ' + text2); 
    }; 

    // expose my variables/API here 
    return { 
     text: text, 
     text2: text2, 
     copyText: copyText 
    }; 
}); 

app.controller('myCtrl', [ '$scope', 'myService', function($scope, myService){ 

    $scope.myService = myService; 

}]); 


/*****index.html******/ 
... 
    <div ng-controller="myCtrl"> 
    <h1>angular service exposure</h1> 
    <input type="text" ng-model="myService.text"> 
    <p>text: {{ myService.text }}</p> 
    <button ng-click="myService.copyText()">copy text to text2</button> 
    <p>text2: {{ myService.text2 }}</p> 
    </div> 

если вы открываете консоль, при нажатии на кнопку, вы увидите «реальные» значения модели, до и после копирования текста в text2 , Которые не те, что я вижу в представлении от контроллера ...

Answer 1

Просмотреть мой edit.

Я сделал некоторые изменения, положить ng-model в качестве параметра copyText():

<div ng-controller="myCtrl"> 
    <h1>angular service exposure</h1> 
    <input type="text" ng-model="myService.value"> 
    <p>text: {{ myService.text }}</p> 
    <button ng-click="myService.copyText(myService.value)">copy text to text2</button> 
    <p>text2: {{ myService.value }}</p> 
    </div> 

JS

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

app.service('myService', function() { 

// my data here 
var text = 'text', 
    text2 = 'text2'; 



// my function here 
var copyText = function(value){ 

    console.log('BEFORE text: '+ text + ' text2: ' + text2); 
    text2 = value; 
    console.log('AFTER text: '+ text + ' text2: ' + text2); 
}; 

// expose my variables/API here 
return { 
    text: text, 
    text2: text2, 
    copyText: copyText 
    }; 
}); 



app.controller('myCtrl', [ '$scope', 'myService', function($scope, myService){ 

    $scope.myService = myService; 

}]); 

Надеется, что это поможет вам

Answer 2

Нашли проблему, я думаю.

Эта функция внутри службы (или фабрики) является конструктором, поэтому внутри любой выполняемой нами функции мы должны использовать «это» для доступа к новым объектам экземпляра.

Так функция становится:

// my function here 
var copyText = function(){ 
    console.log('BEFORE text: '+ this.text + ' text2: ' + this.text2); 
    this.text2 = this.text; 
    console.log('AFTER text: '+ this.text + ' text2: ' + this.text2); 
}; 

Answer 3

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

Операция возврата только для завода.

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

app.factory('testFactory', function(){ 
    return { 
     hello: function(text){ 
      return "Hello " + text; 
     } 
    }    
}); 

app.service('testService', function(){ 
    this.hello= function(text){ 
     return "Hello " + text; 
    };   
}); 

Разница заключается не только в синтаксисе!

Все поставщики углов, такие как Value, Constant, Service или Facotry, являются одиночными.

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

Надеюсь, это поможет!