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路由器，工廠共享數據

回答

相關問題