在angular.js中的控制器之间共享一个变量

时间:2020-12-12 12:08:38

I'm new to angular and I'm wondering how I can share a variable between controllers in angular. I'm using the following scripts -

我刚接触角,我想知道如何在角的控制器之间共享一个变量。我正在使用以下脚本-

In Main.js:

在Main.js:

function MainCntl($scope) {  ---code}function SearchCtrl($scope, $http) {    $scope.url = 'http://10.0.0.13:9000/processAdHoc';    $scope.errorM = "No results";         $scope.search = function() {        $http.post($scope.url, { "data" : $scope.keywords}).        success(function(data, status) {            $scope.status = status;            $scope.data = data;            $scope.result = data;             alert('yes');        })        .        error(function(data, status) {            $scope.data = data || "Request failed";            $scope.status = status;               alert('no');            $scope.result = "failed";        });    };}

In Index.html

在index . html

<body ng-controller="MainCntl" >---code<div ng-controller="SearchCtrl">     <form class="well form-search">     <div class="ui-widget">          <label for="tags"></label>          <a ng-click="search()"><input type="image" src="../../images/search1.png" class="searchbox_submit" /></a>          <input ng-model="keywords" placeholder="Shadow Search" id="tags" class="input-medium search-query rounded" />      </div>     </form></div>---code<p ng-model="result">     {{result}}</p></body>

Everything works well with the ajax I'm sending data and receiving a response, my question is as follows:

我正在发送数据和接收响应的ajax运行良好,我的问题如下:

In the SearchCtrl function I have a variable called $scope.result that is later referred to in Index.html. If I insert the html code that contains that variable into the SearchCtrl controller it works fine but if it is in the MainCtrl controller it does not work. How can I share this variable between the controllers.

在SearchCtrl函数中,我有一个变量$scope。后面在Index.html中引用的结果。如果我将包含该变量的html代码插入到SearchCtrl控制器中,它可以正常工作,但如果是在MainCtrl控制器中,它就不起作用了。如何在控制器之间共享这个变量。

Thanks ahead

谢谢提前

1 个解决方案

#1


70  

Use a service and inject it to both controllers and refer your scope vars to the services variable.

使用服务并将其注入控制器,并将范围vars引用到服务变量。

Example:

例子:

angular.module("yourAppName", []).factory("myService", function(){  return {sharedObject: {data: null } }});function MainCtrl($scope, myService) {  $scope.myVar = myService.sharedObject;}function SearchCtrl($scope, $http, myService) {  $scope.myVar = myService.sharedObject;}

In your template do:

在你的模板做的事:

{{myVar.data}}

See an example Uses Angular v1.1.5

请参见使用角度v1.1.5的示例

The reason you put it in an inner object is to preserve your references, if you keep it without a "sharedObject", and change that object, your binding will be pointing to the old reference and wouldn't show anything in the template.

将它放入内部对象的原因是为了保存引用,如果不使用“sharedObject”保存引用,并更改该对象,那么绑定将指向旧引用,在模板中不会显示任何内容。

#1


70  

Use a service and inject it to both controllers and refer your scope vars to the services variable.

使用服务并将其注入控制器,并将范围vars引用到服务变量。

Example:

例子:

angular.module("yourAppName", []).factory("myService", function(){  return {sharedObject: {data: null } }});function MainCtrl($scope, myService) {  $scope.myVar = myService.sharedObject;}function SearchCtrl($scope, $http, myService) {  $scope.myVar = myService.sharedObject;}

In your template do:

在你的模板做的事:

{{myVar.data}}

See an example Uses Angular v1.1.5

请参见使用角度v1.1.5的示例

The reason you put it in an inner object is to preserve your references, if you keep it without a "sharedObject", and change that object, your binding will be pointing to the old reference and wouldn't show anything in the template.

将它放入内部对象的原因是为了保存引用,如果不使用“sharedObject”保存引用,并更改该对象,那么绑定将指向旧引用,在模板中不会显示任何内容。