0

AngularJS サービスを使用して簡単な例を作成しようとしています。

データモデル（サービス）にいくつかの変数と関数を持ち、コントローラーを介してそれらを公開し、ビューにバインドしたいと考えています。

問題は、コントローラー/ビューが何らかの形でモデルの新しいインスタンスを取得することです。他のコントローラー/ビューを使用して同じサービスの同じデータ/API を表示したいので、これがどのように役立つかを実際にはわかりません。毎回新しいインスタンス。

以下はプランカーの例です: 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 にコピーする前後のモデルの「実際の」値が表示されます。コントローラーからのビューに表示されるものではありません...

4

3 に答える 3

2

私の編集を参照してください。

私はいくつかの変更を行い、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;

}]);

それがあなたを助けることを願っています

于 2013-09-07T12:44:35.433 に答える
0

実際、サービスを使用したい場合は、関数を「this」にリンクする必要があります。

return ステートメントは factory 専用です。

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 などのすべての angulars プロバイダーはシングルトンです。

サービスを使用する場合、返されるのはこのサービスのインスタンスです。ファクトリを使用する場合は、返されるインスタンスの値です。

私はそれが役立つことを願っています!

于 2013-09-16T19:50:52.817 に答える