Javascript 可重用的Angularjs代码_Javascript_Angularjs_Angularjs Directive_Angularjs Service_Angularjs Factory

Javascript 可重用的Angularjs代码

javascript angularjs

Javascript 可重用的Angularjs代码,javascript,angularjs,angularjs-directive,angularjs-service,angularjs-factory,Javascript,Angularjs,Angularjs Directive,Angularjs Service,Angularjs Factory,我的控制器CtrlA中有作用域函数ClickA和ClickB，我想重复使用ClickA和ClickB，在几乎所有其他控制器中都包含作用域变量“a”和“b”，我的意思是，我只是想让其他控制器可以使用这些click函数及其包含的变量，而无需重新定义它们。可以使用services/factory，但不知道如何使用它们或其目录不知道，有人能给我举个例子吗？是的，在注入/调用这些代码后，它们应该成为相应控制器的$scope变量的一部分角度模块（“应用”）控制器（“CtrlA”，功能（$scope） {

我的控制器CtrlA中有作用域函数ClickA和ClickB，我想重复使用ClickA和ClickB，在几乎所有其他控制器中都包含作用域变量“a”和“b”，我的意思是，我只是想让其他控制器可以使用这些click函数及其包含的变量，而无需重新定义它们。可以使用services/factory，但不知道如何使用它们或其目录不知道，有人能给我举个例子吗？是的，在注入/调用这些代码后，它们应该成为相应控制器的$scope变量的一部分

角度模块（“应用”）控制器（“CtrlA”，功能（$scope） { $scope.ClickA=函数（）{ $scope.a=true； $scope.b=假； } $scope.ClickB=函数（）{ $scope.a=false； $scope.b=真； } });


{{a}}

{{b}
{{a}}

{{b}

因此，要在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>

service.js

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

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

同样，您可以在所有角度控制器中访问此功能。

好的。

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

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
    }

});

创建服务：

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

角度模块（“应用程序”，[]） .controller（“ctrl”，功能（$scope，service）{ $scope.ClickA=函数（）{ $scope.a=“ClickA”； $scope.b=假； } $scope.ClickB=函数（）{ $scope.a=false； $scope.b=“ClickB”； } $scope.serviceClickA=service.ClickA.bind（$scope）； $scope.serviceClickB=service.ClickB.bind（$scope）； }) .服务（“服务”，功能（）{ this.ClickA=函数（）{ this.a=“ServiceClickA”；这个.b=假； } this.ClickB=函数（）{ 这个.a=假； this.b=“ServiceClickB”； } })


ClickA


点击B

a={{a}


b={{b}

服务点击A


服务点击B

您必须使用指令。在这个Tomek Małecki中，我可以更好地解释一下，我本可以使用这个指令，但问题是我正在从mvc控制器返回基于访问级别的代码（html），这意味着所有按钮都是有条件地定义的。因此，在html视图中检索按钮后，我想向我的控制器注入一些类似的代码，并将其附加到$scope变量并使用它。Himanshu sharma，在控制器中注入serviceA后，说CtrlA，我如何使单击函数及其变量成为CtrlA$scope数据的一部分。

$scope

在服务中不可注入。georgeawg，那么，我如何使代码作为$scope数据的一部分在其他控制器中可用。请查看使用服务用户更新的it代码。您可以在所有controller.code.rookie中使用此服务，如何将整个服务分配给$scope变量？此外，我还有一些函数之外的变量，比如$scope.var1=true和$scope.var2=false，它们不是ClickA或ClickB的一部分，我想将这些变量也用于其他控制器。

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

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