Question

HY，

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

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。

它之所以没有在第一个方面工作，原因是您已在data方法中更改了对setData的引用。更改引用时，您不使用与以前相同的对象，因此vm.a=Data.getData();未绑定到与初始化时相同的对象。

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

ui-router，工厂共享数据

1 个答案: