可重复使用的Angularjs代码

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中使用相同类型的功能，应使用“服务”。

创建服务

   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);

演示

 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 个解决方案

解决方案1
0 2017-07-23 18:27:38

解决方案2
0 2017-07-24 06:09:41

解决方案3
0 已采纳 2017-07-24 12:19:34

演示

可重复使用的Angularjs代码

问题描述

3 个解决方案

解决方案1 0 2017-07-23 18:27:38

解决方案2 0 2017-07-24 06:09:41

解决方案3 0 已采纳 2017-07-24 12:19:34

演示

解决方案1
0 2017-07-23 18:27:38

解决方案2
0 2017-07-24 06:09:41

解决方案3
0 已采纳 2017-07-24 12:19:34