0

尝试用 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 之前和之后看到模型的“真实”值。哪些不是我在控制器视图中看到的...

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 回答
1

发现问题了，我想。

服务（或工厂）中的这个函数是一个构造函数，所以在我们创建的任何函数中，我们必须使用“this”来访问新的实例对象。

所以函数变为：

// 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);
};
于 2013-09-07T13:14:00.103 回答
0

事实上，如果您想使用服务，您必须将您的功能链接到“this”。

return 语句仅适用于工厂。

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 回答