当前位置:  开发笔记 > 编程语言 > 正文

如何使用角度服务的另一个控制器的数据更新一个控制器?

如何解决《如何使用角度服务的另一个控制器的数据更新一个控制器?》经验,为你挑选了1个好方法。

我有2个控制器.第一个获取所选项目,第二个获取可用项目.

如何显示新选择的项目?

每个可用项下面的按钮都有一个ng-click,它调用一个名为updateItem的服务,我希望更新发生.

我一直在努力这一点,任何帮助都非常感谢.-谢谢

的jsfiddle

I want to update this item

  • {{item.color}}
  • {{item.Distance}}
  • {{item.height}}
  • {{item.name}}
  • {{item.year}}
///////////////////////////////////////////////////
  • {{item.color}}
  • {{item.Distance}}
  • {{item.height}}
  • {{item.name}}
  • {{item.year}}

JS

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

function availableItemsCtrl($rootScope, $scope){
        $scope.availableItems =  {
    "Items": {
        "Item": {
            "Group1": [
                {
                    "color": "White",
                    "Distance": "NA",
                    "height": "3ft",
                    "name": "Underlift",
                    "year": "1955"

                  },
                  {
                    "color": "blue",
                    "Distance": "4M",
                    "height": "2ft",
                    "name": "Underlift",
                    "year": "1956"

                  },
                  {
                     "color": "red",
                     "Distance": "NA",
                     "height": "3ft",
                     "name": "Golen Leaf",
                     "year": "1968"

                   },
                   {
                      "color": "yellow",
                      "Distance": "22M",
                      "height": "10in",
                      "name": "Together",
                      "year": "1988"

                   }


              ]
          },

       }
   }
       $scope.availableItems = $scope.availableItems.Items.Item.Group1;
 }

 function seletedItemCtrl($rootScope, $scope){
         $scope.seletedItem =  {
              "Items":{
                  "Item":{
                     "Group1":[{

                         "color": "black",
                         "Distance": "2M",
                         "height": "1in",
                         "name": "never",
                         "year": "1922"

                          }
                       ]
                     }
                   }
                 }
    $scope.selectedItems = $scope.seletedItem.Items.Item.Group1;

  }
    app.service("updateItem", function(){

      console.log('update item');

   });

Michelle Til.. 7

记住你$scope不是你的模特; 你$scope你的模特所附的东西.Angular鼓励您构建自己的模型对象来描述应用程序的行为.在此示例中,您似乎拥有"可用项目"和"所选项目"的域概念.这是一个简单的服务,为您提供这些概念的模型:

app.factory('Items', function () {
    var Items = {
        availableItems: [],
        selectedItems: []
    };
    Items.addAvailableItem = function (item) {
        Items.availableItems.push(item);
    };
    Items.selectItem = function (item) {
        Items.selectedItems.push(item);
    };
    return Items;
});

所以现在你有了这个Items服务,它有一个addAvailableItem方法,它接受一个项目并将它添加到availableItems数组中,以及一个selectItem方法,它接受一个项目并将它添加到selectedItems数组中.您现在可以使用控制器的作用域将这两个数组绑定到您的视图:

app.controller('someController', function ($scope, Items) {
    $scope.availableItems = Items.availableItems;
};

这是一个jsFiddle,使用您提供的代码作为起点演示概念(它还演示了在模块中定义控制器的更好方法):http://jsfiddle.net/BinaryMuse/kV4mK/



1> Michelle Til..:

记住你$scope不是你的模特; 你$scope你的模特所附的东西.Angular鼓励您构建自己的模型对象来描述应用程序的行为.在此示例中,您似乎拥有"可用项目"和"所选项目"的域概念.这是一个简单的服务,为您提供这些概念的模型:

app.factory('Items', function () {
    var Items = {
        availableItems: [],
        selectedItems: []
    };
    Items.addAvailableItem = function (item) {
        Items.availableItems.push(item);
    };
    Items.selectItem = function (item) {
        Items.selectedItems.push(item);
    };
    return Items;
});

所以现在你有了这个Items服务,它有一个addAvailableItem方法,它接受一个项目并将它添加到availableItems数组中,以及一个selectItem方法,它接受一个项目并将它添加到selectedItems数组中.您现在可以使用控制器的作用域将这两个数组绑定到您的视图:

app.controller('someController', function ($scope, Items) {
    $scope.availableItems = Items.availableItems;
};

这是一个jsFiddle,使用您提供的代码作为起点演示概念(它还演示了在模块中定义控制器的更好方法):http://jsfiddle.net/BinaryMuse/kV4mK/

推荐阅读
雯颜哥_135
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有