在 angular JS 控制器和服务之间传递值

Question

我正在尝试使用 ng-click 从 html 获取用户查询。我想使用从 ng-click 获取的值进行 https 调用。我可以在 Alert--1 中看到数据，但在 Alert--2 中我得到 undefined。在互联网上我读到使用 services 传递值是最好的 practice.Please 如果我错了请纠正我。

我的控制器

mainApp.controller('searchController',function($scope,searchString){

  $scope.getQuery = function(userq)  // its ng-click="getQuery(userq)" on Search button
  {
    $scope.userq=userq;
    alert('Alert--1'+userq);  // its working fine
    searchString.setSearchString(userq);
  };
});

//====================

mainApp.controller('fetchQueryResultController',function($scope,searchString){
   var searchStr = searchString.getSearchString();
   alert('Alert--2--'+searchStr);   //   Undefined
  // Later I'll use this value to fetch data from Watson search(Django) using $https call
});

我的服务：

mainApp.factory('searchString', function () {
    var qVal ;

    return {
        setSearchString:function (query) {
            qVal = query;
        },
        getSearchString:function () {
            return qVal;
        }
    };
});

路由：

.when('/search', {
     templateUrl: "../static/views/seachResult.html",
     controller: "fetchQueryResultController"
  })

有没有更简单的方法？

Answer 1

此警报未定义

var searchStr = searchString.getSearchString();
 alert('Alert--2'+searchStr);

因为qVal还没有设置

qVal 设置当 getQuery 被调用但那个时间 alert2 已经执行

Answer 2

使用服务即可。看看这个，对于初学者来说很清楚：

https://egghead.io/lessons/angularjs-sharing-data-between-controllers

alert('Alert--2'+searchStr); 显示未定义，因为它显然在 $scope.getQuery 之前执行。控制器的初始化在 ng-init 计算表达式之前完成。

在你的情况下，我认为最好在设置数据时触发一个事件，这样第二个控制器就会得到通知。这是通过 $on 和 $emit.

完成的

这里有一个 plunker 你的例子：http://plnkr.co/edit/97mVwbWmoOH3F7m8wbN0?p=preview

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

app.controller('searchController',function($scope,searchString){

  $scope.searchText;

  $scope.getQuery = function(userq)  // its ng-click="getQuery(userq)" on Search button
  {
    $scope.userq=userq;
    alert('Alert--1'+userq);  // its working fine
    searchString.setSearchString(userq, $scope);
  };
});

//====================

app.controller('fetchQueryResultController',function($scope, $rootScope, searchString){
   var searchStr = searchString.getSearchString;

   $scope.getData = function(){
     searchStr = searchString.getSearchString();
     alert('Alert--2--'+ searchStr); 
   }

   $rootScope.$on('dataModified', function(){
     $scope.getData();
   });

});

//====================

app.factory('searchString', function ($rootScope) {
    var qVal ;

    return {
        setSearchString:function (query) {
            qVal = query;
            $rootScope.$emit('dataModified');
        },
        getSearchString:function () {
            return qVal;
        }
    };
});

Answer 3

一个简单的解决方案是让您的工厂 return 一个对象并让您的控制器使用对同一对象的引用：

JS:

// declare the app with no dependencies
var myApp = angular.module('myApp', []);


myApp.factory('searchString', function() {
  var qVal;

  return {
    setSearchString: function(query) {
      qVal = query;
    },
    getSearchString: function() {
      return qVal;
    }
  };
});

myApp.controller('setSearchController', function($scope, searchString) {
  $scope.setQuery = function(userq) {
    $scope.userq = userq;
    searchString.setSearchString(userq);
  };
});

myApp.controller('fetchQueryResultController', function($scope, searchString) {

  $scope.getQuery = function(user) {
    alert(searchString.getSearchString());
  };

});

HTML:

<div ng-app="myApp">
    <div ng-controller="setSearchController">
      <button ng-click="setQuery('Shohel')">Set</button>
    </div>
    <hr />
    <div ng-controller="fetchQueryResultController">
      <button ng-click="getQuery()">Get</button>
    </div>
  </div>

Here is similar fiddle

在 angular JS 控制器和服务之间传递值

Pass value in-between angular JS controller and services

angularjs

ng-controller