我正在尝试使用从html获取用户查询ng-click。我想使用从ng-click中获取的值进行https调用。我可以在 Alert-1中 看到数据,但是在 Alert-2中 我得到了undefined。在互联网上,我读到使用 服务 传递价值是最佳做法。如果我错了,请纠正我。
ng-click
undefined
我的控制器
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" })
有没有更简单的方法?
可以使用服务。看一下,对于初学者来说很清楚:
https://egghead.io/lessons/angularjs-sharing-data-between- controllers
alert('Alert--2'+searchStr); 显示未定义,因为它$scope.getQuery显然是在执行之前。控制器的初始化在ng- init计算表达式之前完成。
alert('Alert--2'+searchStr);
$scope.getQuery
ng- init
在您的情况下,我认为在设置数据后触发一个事件会更好,因此会通知第二个控制器。这是通过$on和完成的$emit。
$on
$emit
这是您的示例的小伙伴: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; } }; });