在 angular.js 中的控制器之间共享变量 [英] Sharing a variable between controllers in angular.js

查看:23
本文介绍了在 angular.js 中的控制器之间共享变量的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是 angular 的新手,我想知道如何在 angular 的控制器之间共享变量.我正在使用以下脚本 -

在 Main.js 中:

function MainCntl($scope) {- -代码}函数 SearchCtrl($scope, $http) {$scope.url = 'http://10.0.0.13:9000/processAdHoc';$scope.errorM = "没有结果";$scope.search = function() {$http.post($scope.url, { "data" : $scope.keywords}).成功(功能(数据,状态){$scope.status = 状态;$scope.data = 数据;$scope.result = 数据;警报('是');}).错误(功能(数据,状态){$scope.data = 数据 ||请求失败";$scope.status = 状态;警报('否');$scope.result = "失败";});};}

在 Index.html 中

</表单>

- -代码<p ng-model="结果">{{结果}}</p>

我正在发送数据并接收响应的ajax一切正常,我的问题如下:

在 SearchCtrl 函数中,我有一个名为 $scope.result 的变量,稍后会在 Index.html 中引用该变量.如果我将包含该变量的 html 代码插入 SearchCtrl 控制器中,它可以正常工作,但如果它在 MainCtrl 控制器中,则它不起作用.我如何在控制器之间共享这个变量.

先谢谢了

解决方案

使用服务并将其注入到两个控制器,并将您的范围变量引用到服务变量.

示例:

angular.module("yourAppName", []).factory("myService", function(){返回{共享对象:{数据:空}}});函数 MainCtrl($scope, myService) {$scope.myVar = myService.sharedObject;}函数 SearchCtrl($scope, $http, myService) {$scope.myVar = myService.sharedObject;}

在你的模板中做:

{{myVar.data}}

查看示例使用 Angular v1.1.5

你把它放在一个内部对象中的原因是为了保留你的引用,如果你保持它没有sharedObject",并且改变那个对象,你的绑定将指向旧的引用并且不会在模板.

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:

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

<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:

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.

Thanks ahead

解决方案

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

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

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.

这篇关于在 angular.js 中的控制器之间共享变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆