传递状态之间的对象 [英] Passing an object between states

查看：148 发布时间：2016/5/10 19:53:57 javascript angularjs object

本文介绍了传递状态之间的对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在试图传递对象模板第1页点击名为第2页采用了棱角分明的另一个模板。我能够用NG-点击访问该对象，但我不能将它传递给其他模板。我一直在使用state.go（）可能会奏效阅读，但我一直没能想出解决办法。如果state.go（）不是一个好主意，我应该用什么呢？

 angular.module（'游乐场'，[]）\r
\r
的.config（函数（$ stateProvider，$ urlRouterProvider）{\r
  使用严格的;\r
\r
  / *设置状态为应用程序的不同部分。 * /\r
  $ stateProvider\r
    .STATE（第1页，{\r
      名称：第1页，\r
      网址：'/第1页，\r
      templateUrl：page1.html，\r
      控制器：'MainCtrl\r
    }）\r
    .STATE（'PAGE2'，{\r
      名称：第2页，\r
      网址：'/第2页，\r
      templateUrl：page2.html，\r
      控制器：'MainCtrl\r
    }）;\r
  $ urlRouterProvider.otherwise（'/第1页'）;\r
\r
}）\r
\r
.controller（'MainCtrl'，函数（$范围，$州）{\r
  使用严格的;\r
\r
\r
  $ scope.add =函数（项目，$ stateParams）{\r
    如果（$ scope.ordered.indexOf（项目）-1个）{\r
\r
      //现在什么\r
\r
    }其他{\r
\r
      $ scope.ordered.push（项目）;\r
\r
    }\r
\r
    的console.log（$ scope.ordered）;\r
  };\r
\r
  $ scope.ordered = []\r
\r
  $ scope.menu = [{\r
    标题：比萨，\r
    类型：主菜，\r
    最喜欢的：真实，\r
    价格：10\r
  }，{\r
    标题：玉米饼，\r
    类型：主菜，\r
    最喜欢的：假的，\r
    价格：5\r
  }，{\r
    标题：洋葱圈，\r
    类型：'应用'，\r
    最喜欢的：假的，\r
    价格：2\r
  }，{\r
    标题：冰淇淋，\r
    类型：'甜点'，\r
    最喜欢的：假的，\r
    价格：11\r
  }，{\r
    标题：苹果ñ奶酪'，\r
    类型：'应用'，\r
    最喜欢的：假的，\r
    价格：7\r
  }，{\r
    标题：'沙拉'，\r
    类型：'沙拉'，\r
    最喜欢的：真实，\r
    价格：4\r
  }];\r
\r
\r
  $ scope.ordered = [];\r
\r
}）;

＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
\r
\r
＆LT;机身NG-应用=操场NG控制器=MainCtrl＆GT;\r
  ＆LT;脚本ID =page1.html类型=文/ NG-模板＆GT;\r
    ＆LT; DIV NG重复=项菜单中的＆GT;\r
\r
      ＆所述p为H.; {{item.title}}＆下; / P＆GT;\r
\r
      ＆所述p为H.; {{项目。形式}}＆下; / P＆GT;\r
      ＆LT;按钮NG点击=添加（项目）;＆gt;添加＆LT; /按钮＆GT;\r
\r
    ＆LT; / DIV＆GT;\r
  ＆LT; / SCRIPT＆GT;\r
\r
  ＆LT;脚本ID =page2.html类型=文/ NG-模板＆GT;\r
    ＆LT; DIV NG重复=项目有序＆GT;\r
\r
      ＆所述p为H.; {{item.title}}＆下; / P＆GT;\r
\r
      ＆所述p为H.; {{项目。形式}}＆下; / P＆GT;\r
      ＆LT;按钮和GT;删除＆LT; /按钮＆GT;\r
\r
    ＆LT; / DIV＆GT;\r
  ＆LT; / SCRIPT＆GT;\r
\r
＆LT; /身体GT;

解决方案

当您要共享数据，可以使用角度的服务，因为所有的棱角服务的单身，让您可以轻松地共享数据控制器和状态之间。

例如：

控制器1

 （（）=＆GT; {  功能控制器1（$范围，服务）{    $ scope.test ='在控制器1';    $ scope.service =服务;    $ scope.menu = [
      {
      标题：比萨，
      类型：主菜，
      最喜欢的：真实，
      价格：10
      }，
      {
        标题：玉米饼，
        类型：主菜，
        最喜欢的：假的，
        价格：5
      }，
      {
        标题：洋葱圈，
        类型：'应用'，
        最喜欢的：假的，
        价格：2
      }，
      {
        标题：冰淇淋，
        类型：'甜点'，
        最喜欢的：假的，
        价格：11
      }，
      {
        标题：苹果ñ奶酪'，
        类型：'应用'，
        最喜欢的：假的，
        价格：7
      }，
      {
        标题：'沙拉'，
        类型：'沙拉'，
        最喜欢的：真实，
        价格：4
      }
    ];    的setTimeout（（）=＆GT; {
      //我们的数据分配给数据服务
      Service.data = $ scope.menu;
      //更新绑定
      $ $范围适用于（）。
    }，1000）;
  }  角
    .module（'应用'，[]）
    .controller（CTRL1，控制器1）;}）（）;

2控制器

 （（）=＆GT; {  功能控制器2（$范围，服务）{    $ scope.test ='在控制器2';    //获得我们的数据服务实例
    $ scope.service =服务;  }  角
    .module（应用）
    .controller（'CTRL2'，控制器2）;}）（）;

服务

 （（）=＆GT; {  功能服务（）{    常量的obj = {
      数据：''
    };    返回OBJ;  }  角
    .module（应用）
    .factory（服务，服务）;}）（）;

HTML

 ＆LT;机身NG-应用=应用程序＆GT;
    ＆LT; DIV NG控制器=CTRL1＆GT;
      {{测试}}
      ＆LT; pre＆GT; {{菜单| JSON}}＆LT; / pre＆GT;
    ＆LT; / DIV＆GT;    ＆LT; DIV NG控制器='CTRL2'＆GT;
      {{测试}}
      ＆LT; pre＆GT; {{service.data | JSON}}＆LT; / pre＆GT;
    ＆LT; / DIV＆GT;  ＆LT; /身体GT;

在这个例子中，我们从控制器1，通过使用一个数据服务将数据传递到控制器2。你可以做同样的你的状态。

您可以看到 工作Plunker

I have been trying to pass the object clicked in template page1 to another template called page2 using angular. I am able to access this object using ng-click but I am not able to pass it to the other template. I have read using state.go() might work, but I have not been able to figure this out. If state.go() isn't a good idea what should I use instead?

angular.module('playground', [])

.config(function($stateProvider, $urlRouterProvider) {
  "use strict";

  /* Set up the states for the application's different sections. */
  $stateProvider
    .state('page1', {
      name: 'page1',
      url: '/page1',
      templateUrl: 'page1.html',
      controller: 'MainCtrl'
    })
    .state('page2', {
      name: 'page2',
      url: '/page2',
      templateUrl: 'page2.html',
      controller: 'MainCtrl'
    });
  $urlRouterProvider.otherwise('/page1');

})

.controller('MainCtrl', function($scope, $state) {
  "use strict";


  $scope.add = function(item, $stateParams) {
    if ($scope.ordered.indexOf(item) > -1) {

      //nothing for now

    } else {

      $scope.ordered.push(item);

    }

    console.log($scope.ordered);
  };

  $scope.ordered = []

  $scope.menu = [{
    title: 'Pizza',
    type: 'entree',
    favorite: true,
    price: 10
  }, {
    title: 'Tacos',
    type: 'entree',
    favorite: false,
    price: 5
  }, {
    title: 'Onion Rings',
    type: 'app',
    favorite: false,
    price: 2
  }, {
    title: 'Ice Cream',
    type: 'dessert',
    favorite: false,
    price: 11
  }, {
    title: 'Mac n Cheese',
    type: 'app',
    favorite: false,
    price: 7
  }, {
    title: 'Salad',
    type: 'salad',
    favorite: true,
    price: 4
  }];


  $scope.ordered = [];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="playground" ng-controller="MainCtrl">
  <script id="page1.html" type="text/ng-template">
    <div ng-repeat="item in menu">

      <p>{{item.title}}</p>

      <p>{{item.type}}</p>
      <button ng-click="add(item);">add</button>

    </div>
  </script>

  <script id="page2.html" type="text/ng-template">
    <div ng-repeat="item in ordered">

      <p>{{item.title}}</p>

      <p>{{item.type}}</p>
      <button>remove</button>

    </div>
  </script>

</body>

解决方案

When you want to share data, you can use angular service, because all angular services are singletons, so you can easily share data between controllers and states.

For example :

Controller 1

(() => {

  function Controller1($scope, Service) {

    $scope.test = 'In Controller 1';

    $scope.service = Service;

    $scope.menu = [
      {
      title: 'Pizza',
      type: 'entree',
      favorite: true,
      price: 10
      }, 
      {
        title: 'Tacos',
        type: 'entree',
        favorite: false,
        price: 5
      }, 
      {
        title: 'Onion Rings',
        type: 'app',
        favorite: false,
        price: 2
      }, 
      {
        title: 'Ice Cream',
        type: 'dessert',
        favorite: false,
        price: 11
      }, 
      {
        title: 'Mac n Cheese',
        type: 'app',
        favorite: false,
        price: 7
      }, 
      {
        title: 'Salad',
        type: 'salad',
        favorite: true,
        price: 4
      }
    ];

    setTimeout(() => {
      //Assign our data to the data service
      Service.data = $scope.menu;
      //Update the bindings
      $scope.$apply();
    }, 1000);


  }

  angular
    .module('app', [])
    .controller('Ctrl1', Controller1);

})();

Controller 2

(() => {

  function Controller2($scope, Service) {

    $scope.test = 'In Controller 2';

    //Retrieve instance of our data Service
    $scope.service = Service;

  }

  angular
    .module('app')
    .controller('Ctrl2', Controller2);

})();

Service

(() => {

  function Service() {

    const obj = {
      data: ''
    };

    return obj;

  }

  angular
    .module('app')
    .factory('Service', Service);

})();

Html

  <body ng-app="app">
    <div ng-controller="Ctrl1">
      {{test}}
      <pre>{{menu | json}}</pre>
    </div>

    <div ng-controller='Ctrl2'>
      {{test}}
      <pre>{{service.data | json}}</pre>
    </div>

  </body>

In this example, we are passing data from controller 1 to controller 2 by using a data service. You can do the same with your states.

You can see the Working Plunker

这篇关于传递状态之间的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

传递状态之间的对象 [英] Passing an object between states

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

传递状态之间的对象 [英] Passing an object between states

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭