首页 文章

在Angular JS中的控制器之间传递数据？

提问于
浏览 次
234

我有一个显示我的产品的基本控制器，

App.controller('ProductCtrl',function($scope,$productFactory){
     $productFactory.get().success(function(data){
           $scope.products = data;
     });
});

在我看来，我在列表中显示这些产品

<ul>
    <li ng-repeat="product as products">
        {{product.name}}
    </li>
</ul

我想要做的是当有人点击产品名称时，我有另一个名为cart的视图，其中添加了此产品 .

<ul class="cart">
      <li>
          //click one added here
      </li>
      <li>
          //click two added here
      </li>
 </ul>

所以我的疑问是，如何将这个点击的产品从第一个控制器传递到第二个？我认为购物车也应该是一个控制器 .

我使用指令处理click事件 . 另外我觉得我应该使用服务来实现上述功能只是无法想象如何？因为购物车将是预定义的，所添加的产品数量可能是5/10，具体取决于用户所在的页面 . 所以我想保持这种通用性 .

更新：

我创建了一个广播服务，在第二个控制器中我收到它 . 现在查询是如何更新dom的？由于我的产品列表是非常硬编码的 .

javascript angularjs angular-services

18 回答

  • 1

    从描述中，似乎您应该使用服务 . 查看http://egghead.io/lessons/angularjs-sharing-data-between-controllers和AngularJS Service Passing Data Between Controllers以查看一些示例 .

    您可以这样定义您的产品服务：

    app.service('productService', function() {
  var productList = [];

  var addProduct = function(newObj) {
      productList.push(newObj);
  };

  var getProducts = function(){
      return productList;
  };

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

    依赖关系将服务注入两个控制器 .

    在 ProductController 中，定义一些将所选对象添加到数组的操作：

    app.controller('ProductController', function($scope, productService) {
    $scope.callToAddToProductList = function(currObj){
        productService.addProduct(currObj);
    };
});

    在 CartController 中，从服务中获取产品：

    app.controller('CartController', function($scope, productService) {
    $scope.products = productService.getProducts();
});
    回复于
  • 4

    我不知道它是否会对任何人有所帮助，但基于Charx（谢谢！）的回答我创建了简单的缓存服务 . 随意使用，重新混音和分享：

    angular.service('cache', function() {
    var _cache, _store, _get, _set, _clear;
    _cache = {};

    _store = function(data) {
        angular.merge(_cache, data);
    };

    _set = function(data) {
        _cache = angular.extend({}, data);
    };

    _get = function(key) {
        if(key == null) {
            return _cache;
        } else {
            return _cache[key];
        }
    };

    _clear = function() {
        _cache = {};
    };

    return {
        get: _get,
        set: _set,
        store: _store,
        clear: _clear
    };
});
    回复于
  • 9

    如何将这个点击的产品从第一个控制器传递到第二个？

    单击时，您可以调用调用broadcast的方法：

    $rootScope.$broadcast('SOME_TAG', 'your value');

    第二个控制器会监听这个标签，如：

    $scope.$on('SOME_TAG', function(response) {
      // ....
})

    由于我们无法将$ scope注入服务，因此没有像单例$范围那样的东西 .

    但我们可以注入 $rootScope . 因此，如果将值存储到服务中，则可以在服务正文中运行 $rootScope.$broadcast('SOME_TAG', 'your value'); . （参见@Charx关于服务的描述）

    app.service('productService',  function($rootScope) {/*....*/}

    Please check good article about $broadcast，$emit

    回复于
  • 2

    Solution without creating Service, using $rootScope:

    要在应用控制器之间共享属性，您可以使用Angular $ rootScope . 这是另一种共享数据的选项，可以让人们了解它 .

    跨控制器共享某些功能的首选方法是服务，以读取或更改可以使用$ rootscope的全局属性 .

    var app = angular.module('mymodule',[]);
app.controller('Ctrl1', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = true;
}]);

app.controller('Ctrl2', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = false;
}]);

    在模板中使用$ rootScope（使用$ root访问属性）：

    <div ng-controller="Ctrl1">
    <div class="banner" ng-show="$root.showBanner"> </div>
</div>
    回复于
  • 3

    您可以通过两种方法完成此操作 .

    • 使用 $rootscope ，但我不推荐这个 . $rootScope 是最顶级的范围 . 一个应用程序只能有一个 $rootScope ，它将在应用程序的所有组件之间共享 . 因此它就像一个全局变量 .

    • 使用服务 . 您可以通过在两个控制器之间共享服务来完成此操作 . 服务代码可能如下所示：

    app.service('shareDataService', function() {
    var myList = [];

    var addList = function(newObj) {
        myList.push(newObj);
    }

    var getList = function(){
        return myList;
    }

    return {
        addList: addList,
        getList: getList
    };
});

    你可以看到我的小提琴here .

    回复于
  • 16

    在控制器之间共享数据的更简单方法是使用嵌套数据结构 . 而不是，例如

    $scope.customer = {};

    我们可以用

    $scope.data = { customer: {} };

    data 属性将从父作用域继承，因此我们可以覆盖其字段，保持对其他控制器的访问 .

    回复于
  • 66
    angular.module('testAppControllers', [])
    .controller('ctrlOne', function ($scope) {
        $scope.$broadcast('test');
    })
    .controller('ctrlTwo', function ($scope) {
        $scope.$on('test', function() {
        });
    });
    回复于
  • 1

    我在这里看到了答案，它正在回答控制器之间共享数据的问题，但如果我想让一个控制器通知对方有关数据已被更改的事实（不使用广播），我该怎么办？简单！只使用着名的访客模式：

    myApp.service('myService', function() {

    var visitors = [];

    var registerVisitor = function (visitor) {
        visitors.push(visitor);
    }

    var notifyAll = function() {
        for (var index = 0; index < visitors.length; ++index)
            visitors[index].visit();
    }

    var myData = ["some", "list", "of", "data"];

    var setData = function (newData) {
        myData = newData;
        notifyAll();
    }

    var getData = function () {
        return myData;
    }

    return {
        registerVisitor: registerVisitor,
        setData: setData,
        getData: getData
    };
}

myApp.controller('firstController', ['$scope', 'myService',
    function firstController($scope, myService) {

        var setData = function (data) {
            myService.setData(data);
        }

    }
]);

myApp.controller('secondController', ['$scope', 'myService',
    function secondController($scope, myService) {

        myService.registerVisitor(this);

        this.visit = function () {
            $scope.data = myService.getData();
        }

        $scope.data = myService.getData();
    }
]);

    以这种简单的方式，一个控制器可以更新另一个控制器，其中一些数据已被更新 .

    回复于
  • 24

    我们可以在会话中存储数据，并可以在程序中的任何地方使用它 .

    $window.sessionStorage.setItem("Mydata",data);

    其他地方

    $scope.data = $window.sessionStorage.getItem("Mydata");
    回复于
  • 8

    我创建了一个控制路径路径模式之间共享范围的工厂，因此您可以在用户在同一路径父路径中导航时维护共享数据 .

    .controller('CadastroController', ['$scope', 'RouteSharedScope',
    function($scope, routeSharedScope) {
      var customerScope = routeSharedScope.scopeFor('/Customer');
      //var indexScope = routeSharedScope.scopeFor('/');
    }
 ])

    因此，如果用户转到另一个路径路径，例如'/ Support'，路径'/ Customer'的共享数据将自动销毁 . 但是，如果不是这样，用户转到'子'路径，如'/ Customer / 1'或'/ Customer / list'，则不会破坏范围 .

    你可以在这里看到一个样本：http://plnkr.co/edit/OL8of9

    回复于
  • 2

    在模块中创建工厂并在控制器中添加工厂的引用并在控制器中使用其变量，现在通过在任何需要的地方添加引用来获取另一个控制器中的数据值

    回复于
  • 1

    使用角度服务的一种方法：

    var app = angular.module("home", []);

app.controller('one', function($scope, ser1){
$scope.inputText = ser1;
});


app.controller('two',function($scope, ser1){
$scope.inputTextTwo = ser1;
});

app.factory('ser1', function(){
return {o: ''};
});



<div ng-app='home'>

<div ng-controller='one'>
  Type in text: 
  <input type='text' ng-model="inputText.o"/>
</div>

    

<div ng-controller='two'>
  Type in text:
  <input type='text' ng-model="inputTextTwo.o"/>
</div>

</div>

    https://jsfiddle.net/1w64222q/

    回复于
  • -1

    1

    using $localStorage

app.controller('ProductController', function($scope, $localStorage) {
    $scope.setSelectedProduct = function(selectedObj){
        $localStorage.selectedObj= selectedObj;
    };
});

app.controller('CartController', function($scope,$localStorage) { 
    $scope.selectedProducts = $localStorage.selectedObj;
    $localStorage.$reset();//to remove
});

    2

    单击时，您可以调用调用广播的方法：

    $rootScope.$broadcast('SOME_TAG', 'your value');

and the second controller will listen on this tag like:
$scope.$on('SOME_TAG', function(response) {
      // ....
})

    3

    using $rootScope:

    4

    window.sessionStorage.setItem("Mydata",data);
$scope.data = $window.sessionStorage.getItem("Mydata");

    5

    使用角度服务的一种方法：

    var app = angular.module("home", []);

app.controller('one', function($scope, ser1){
$scope.inputText = ser1;
});

app.controller('two',function($scope, ser1){
$scope.inputTextTwo = ser1;
});

app.factory('ser1', function(){
return {o: ''};
});
    回复于
  • 314

    FYI $ scope对象具有$ emit，$ broadcast，$ on和$ rootScope对象具有相同的$ emit，$ broadcast，$ on

    阅读更多关于发布/订阅设计模式的更多信息here

    回复于
  • 2

    为了改进@Maxim使用$ broadcast提出的解决方案，发送数据不会改变

    $rootScope.$broadcast('SOME_TAG', 'my variable');

    但收听数据

    $scope.$on('SOME_TAG', function(event, args) {
    console.log("My variable is", args);// args is value of your variable
})
    回复于
  • 4

    有三种方法可以做到，

    a）使用服务

    b）利用控制器范围之间依赖的父/子关系 .

    c）在Angular 2.0中，“As”关键字将数据从一个控制器传递到另一个控制器 .

    有关示例的更多信息，请查看以下链接：

    http://www.tutespace.com/2016/03/angular-js.html

    回复于
  • 0
    var custApp = angular.module("custApp", [])
.controller('FirstController', FirstController)
.controller('SecondController',SecondController)
.service('sharedData', SharedData);

FirstController.$inject = ['sharedData'];
function FirstController(sharedData) {
this.data = sharedData.data;
}

SecondController.$inject['sharedData'];
function SecondController(sharedData) {
this.data = sharedData.data;
}

function SharedData() {
this.data = {
    value: 'default Value'
}
}

    第一控制器

    <div ng-controller="FirstController as vm">
<input type=text ng-model="vm.data.value" />
</div>

    第二控制器

    <div ng-controller="SecondController as vm">
    Second Controller<br>
    {{vm.data.value}}
</div>
    回复于
  • 2

    我觉得

    最好的方式

    是使用$ localStorage . （一直工作）

    app.controller('ProductController', function($scope, $localStorage) {
    $scope.setSelectedProduct = function(selectedObj){
        $localStorage.selectedObj= selectedObj;
    };
});

    你的cardController将是

    app.controller('CartController', function($scope,$localStorage) { 
    $scope.selectedProducts = $localStorage.selectedObj;
    $localStorage.$reset();//to remove
});

    你也可以添加

    if($localStorage.selectedObj){
    $scope.selectedProducts = $localStorage.selectedObj;
}else{
    //redirect to select product using $location.url('/select-product')
}
    回复于

相关问题