应用程序中可重用的AngularJS服务

发布时间:2020-01-21 发布网站:大佬教程
大佬教程收集整理的这篇文章主要介绍了应用程序中可重用的AngularJS服务大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我对AngularJS很新,所以我可能会问完全错误的问题.我想要完成的是在单个应用程序中创建一个可重用的数据绑定类.下面用一个非常简单的例子演示了我想要完成的事情.

假设我想创建一个带有值和增量方法的计数器.我可以创建一个服务并在控制器中使用它,如下所示:

angular.module("fiddle",["counter"])
.controller("MainCtrl",function($scope,counter) {
    $scope.counter = counter;
});

angular.module("counter",[])
.service("counter",function() {
    this.count = 0;
    this.increment = function(x) {
        this.count += x;
    };
});

然后我可以显示一个视图来添加一个计数器:

<h1>Count: {{counter.count}}</h1>
<button ng-click="counter.increment(1)">Add 1</button>
<button ng-click="counter.increment(5)">Add 5</button>
<button ng-click="counter.increment(10)">Add 10</button>

这适用于一个计数器,但如果我想在同一个控制器中有多个计数器怎么办?由于服务是单身,我不能这样做.使用Angular创建类似的东西的最佳方法是什么,因为其他服务会更复杂?谢谢!

http://jsfiddle.net/jeffaudio/ExASb/

要使服务不像单身一样,您可以这样做:
angular.module("counter",function() {
    var aCounter = function() {
        this.count = 0;
        this.increment = function(x) {
            this.count += x;
        };
    }
    return {
        getInstance: function () {
          return new aCounter();
        }
    };
});

然后从您的控制器管理您的计数器,例如:

function myCtrl($scope,counter) {
    $scope.counter1 = counter.getInstance();
    $scope.counter2 = counter.getInstance();
}

http://jsfiddle.net/KLDEZ/

大佬总结

以上是大佬教程为你收集整理的应用程序中可重用的AngularJS服务全部内容,希望文章能够帮你解决应用程序中可重用的AngularJS服务所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ群:277859234,请注明来意。