ui-路由器，出厂共享数据

Question

嗨，

我想在 ui-view 中与工厂共享 1 个组件 (NavBar) 和其他 1 个 ctrl (Ctrl1) 之间的数据，但它不起作用。当我在组件或 ctrl 中修改工厂时，它只修改他自己的范围。我想在 ctrl 和组件之间共享工厂。

HTML :

<div ng-app="myApp">
  <global-component></global-component>
 </div>

Javascript :

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

myApp.config(function ($stateProvider, $urlRouterProvider){
  $stateProvider.state("state1", {
    url: "#",
    template: "<p>State 1 </p> <input type=\"text\" ng-model=\"vm.b\"/> {{vm.b}}",
    controller: "Ctrl1",
    controllerAs: 'vm'
  }); 

   $urlRouterProvider.otherwise(function($injector, $location) {
    $injector.get('$state').go("state1");
    });
});

//Global Component
myApp.component('globalComponent', {
          template: 'Global controler </br> <nav-bar></nav-bar> <div ui-view></div>',
      controller: "GlobalCtrl",
      controllerAs: 'vm'
  });
myApp.controller('GlobalCtrl',function(Data){
  Data.test="test1";
});


//NavBar
myApp.component('navBar', {
      template: 'NavBar  <input type=\"text\" ng-model=\"vm.a\"/> {{vm.a}}',
      controller: "NavBarCtrl",
      controllerAs: 'vm'
  });

myApp.controller('NavBarCtrl',function(Data){
  var vm=this;
  vm.a=Data.test;
});

myApp.controller('Ctrl1',function(Data){
  var vm=this;
  Data.test="titi";
  vm.b=Data.test; 
});




myApp.factory('Data', function(){
  var data={};
  data.test="";
  return data;
});

代码： https://codepen.io/anon/pen/YrdvbV?editors=1111

谢谢

Answer 1

检查工作解决方案 here。

它首先不起作用的原因是您在 setData 方法中更改了对 data 的引用。更改引用时，您使用的对象与以前不同，因此此 vm.a=Data.getData(); 未绑定到与初始化时相同的对象。

在您的情况下，解决此问题的一种方法是将对象包裹在数据周围（在提供的示例中，我使用了 data.item 而不仅仅是数据）。其他选项是使用 $watch 或类似的东西，这样值可以反弹到 ng-model.

ui-路由器，出厂共享数据

ui-router, factory share data

angularjs

angular-ui-router