javascript - 变量捕获按钮并将其传递给 Angular 服务

标签 javascript angularjs button service controller

社区您好,我正在使用 Angular 开发一个项目,但我遇到了以下问题:

我想捕获按钮内部的值,该值来自 Controller ,然后单击将此值传递给服务,并且该服务应转到另一个 Controller :

HTML

<div ng-app="myApp">

  <div ng-controller="capturaCtrl">
  <!--capturar valor en 'algunaVariable' con ng-click o ng-model se me ocurre para pasarla al service captura -->
   CODIGO A CAPTURAR: <button>{{capturame}}</button>
  </div>

  <br>

  <div ng-controller="recibeCtrl">
   CODIGO CAPTURADO: 
    {{codigo}}
  </div>

JS

    var app =  angular.module('myApp',[]);

  app.factory('captura',  function(){
    var  codigo = algunaVariable; // <== variable que reciba del controllar capturaCtrl
    return{
      getCodes: function(){
        return codigo;
      }
    }
  });

  app.controller('capturaCtrl', ['$scope', 'captura', function($scope, captura){
    $scope.capturame = '1111';

  }]);


  app.controller('recibeCtrl', ['$scope', 'captura', function($scope, captura){
    $scope.codigo = captura.getCodes();

  }]);

在这里,我给你我的代码:https://jsfiddle.net/alx_lopz/wgfh3dLa/5/

最佳答案

向您的工厂添加 setter 函数。

  app.factory('captura',  function(){
    var  codigo = "initial value"; // <== variable que reciba del controllar capturaCtrl
    return{
      getCodes: function(){
        return codigo;
      },
      setCodes: function(value) {
        codigo = value;
        return value;
      }
    }
  });

ng-click 添加到您的按钮

CODIGO A CAPTURAR: <button ng-click="setCodigo(capturame)">
                       {{capturame}}
                   </button>

将检索转换为函数

CODIGO CAPTURADO: {{ codigo() }}

将函数放在范围内

  app.controller('capturaCtrl', ['$scope', 'captura', function($scope, captura){
    $scope.capturame = '1111';
    $scope.setCodigo = captura.setCodes;

  }]);

  app.controller('recibeCtrl', ['$scope', 'captura', function($scope, captura){
    $scope.codigo = captura.getCodes;

  }]);

DEMO on JSFiddle .

关于javascript - 变量捕获按钮并将其传递给 Angular 服务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35259254/

相关文章:

javascript - 如何偏移 Google maps api V3 中的中心点

javascript - 如何在javascript中使用webservice

angularjs - 在 Angular 中全局注册一个指令

c# - 在 WPF 中加载自定义多边形作为按钮图像

angular - 如何使用函数设置禁用按钮属性?

在 Java 中创建按钮事件时发生 Java 运行时错误

javascript - Angular 图表 - 无法读取数据

javascript - 为什么我的 JavaScript 代码不起作用

angularjs - Angular2、ZoneJS 和外部更改的 DOM

javascript - ng-Show 无法从 Controller 工作