The DEMO

Question

我的控制器CtrlA中有范围功能ClickA和ClickB，我想重新使用ClickA和ClickB，其中几乎所有其他控制器都包含范围变量“a”和“b”，我的意思是，我只想制作将这些单击函数及其包含的变量提供给其他控制器，而无需重新定义它们。它可能与服务/工厂但不知道与它们一起工作或它的目录不知道，有人可以建议我一个例子请和注入/调用这些代码后他们应该成为$ scope变量的一部分各自的控制员。

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中使用相同类型的功能，您应该使用＆＃34;服务＆＃34;。

创建服务

   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代码

3 个答案:

The DEMO