UI路由器，工厂共享数据

我想1个部分（的NavBar），并在用户界面视图与工厂其他1个CTRL（CTRL 1）之间共享数据，但它不能正常工作。当我修改组件或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

感谢

来源

2017-10-18 Samshay

控制器声明不起作用。你应该使用['Data'，函数（Data）{}]。 Si称为“Data”的服务被注入到控制器中，并作为名为Data的参数接收。 – Alburkerk

声明像这样工作myApp.controller（'NavBarCtrl'，function（Data）{，看看codepen。 – Samshay

退房工作液here。

它没有在第一个工作区中工作的原因是您已在setData方法中将参考文献更改为data。当引用发生变化时，您的工作不会与之前使用的对象相同，因此此vm.a=Data.getData();未绑定到与初始化时相同的对象。

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

来源

2017-10-18 14:23:31 eminlala

非常感谢，它终于非常简单:) – Samshay

UI路由器，工厂共享数据

回答

相关问题