可重复使用 Angularjs 代码

Question

我的控制器 CtrlA 中有范围函数 ClickA 和 ClickB，我想在几乎所有其他控制器中重新使用 ClickA 和 ClickB，其中包含范围变量 "a" 和 "b"，我的意思是，我只是想在不重新定义它们的情况下向其他控制器提供这些点击功能及其包含的变量。 services/factory 可能可行，但不知道如何使用它们或其目录不知道，有人可以给我一个例子吗，是的，在 injecting/calling 这些代码之后，它们应该成为 $ 的一部分各个控制器的范围变量。

angular.module("App").controller("CtrlA", function($scope)
{

$scope.ClickA = function(){

$scope.a =true;
$scope.b = false;
}


$scope.ClickB = function(){

$scope.a =false;
$scope.b = true;
}

});

<button ng-click="ClickA()"/>
{{a}}<br>
{{b}}

<button ng-click="ClickB()"/>
{{a}}<br>
{{b}}

Answer 1

因此，要在 angularJs 中使用相同类型的功能，您应该使用 "Services"。

创建服务

   angular.module('myApp', [])
.service('myService', function () { 

      this.ClickA = function(a) {
               return a+a;
            }
      this.ClickB = function(a) {
               return a-a;
            }
 })
.controller('myCtrl', ['$scope','myService', function ($scope,myService) {
  // Do something with myService

   $scope.add= myService.ClickA(2);
   $scope.sub= myService.ClickB(2);
}]);

你可以这样使用。

index.html.

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="controller.js"></script>
 <script src="service.js"></script> 
<body>

<div ng-app="myApp">
  <div ng-controller="myCtrl">
  <p>Name : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}  {{add}}</h1>
  </div>
</div>

</body>
</html>

controller.js

angular.module('myApp', [])
.controller('myCtrl', ['$scope','myService', function ($scope,myService) {
  // Do something with myService

   $scope.add= myService.add(2);
   $scope.lastName = "Doe";
}]);

service.js

angular.module('myApp')
.service('myService', function () { 

      this.add = function(a) {
               return a+a;
            };
      this.sub= function(a) {
               return a-a;
            }
 })

同样的方法你可以在Angular的所有控制器中访问这个函数。

好的。

Answer 2

要在控制器之间共享功能和数据，您需要使用服务，因为它们是单例对象。

angular.module("App")
.factory("helperService", function() {

    var self = this;

    function clickA() {
        self.a = true;
        self.b = false;
    }

    function clickB() {
        self.a = false;
        self.b = true;
    }

    return {
        clickA: clickA,
        clickB: clickB
    }

});

Answer 3

创建服务：

app.service("service", function() {
    this.ClickA = function(){
        this.a = true;
        this.b = false;
    }
    this.ClickB = function(){
        this.a = false;
        this.b = true;
    }
})

在控制器中，绑定到 $scope:

$scope.serviceClickA = service.ClickA.bind($scope);
$scope.serviceClickB = service.ClickB.bind($scope);

The DEMO

angular.module("app",[])
.controller("ctrl", function($scope, service) {
    $scope.ClickA = function(){
        $scope.a = "ClickA";
        $scope.b = false;
    }
    $scope.ClickB = function(){
        $scope.a = false;
        $scope.b = "ClickB";
    }
    $scope.serviceClickA = service.ClickA.bind($scope);
    $scope.serviceClickB = service.ClickB.bind($scope);
})
.service("service", function() {
    this.ClickA = function(){
        this.a = "ServiceClickA";
        this.b = false;
    }
    this.ClickB = function(){
        this.a = false;
        this.b = "ServiceClickB";
    }
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
      <button ng-click="ClickA()">ClickA</button>
    <br/>
      <button ng-click="ClickB()">ClickB</button>
    <hr/>
      a= {{a}}
    <br/>
      b= {{b}}
    <hr/>
      <button ng-click="serviceClickA()">serviceClickA</button>
    <br/>
      <button ng-click="serviceClickB()">serviceClickB</button>      
  </body>

可重复使用 Angularjs 代码

Re-Usable Angularjs Code

javascript

angularjs

angularjs-directive

angularjs-service

angularjs-factory

The DEMO