UI-ルータ、工場出荷時の共有データ

Question

のHy、

私は、工場でのUIビューに1つのコンポーネント（ナビゲーションバー）および他の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をチェックしてください。

最初の場所で機能していなかったのは、メソッドで参照番号をdataに変更したためです。参照が変更されると、前と同じオブジェクトで作業していないので、vm.a=Data.getData();は初期化時と同じオブジェクトにバインドされません。

あなたのケースでは、これを解決する1つの方法は、データの周囲にオブジェクトをラップすることです（例では、データの代わりにdata.itemを使用しました）。他のオプションは、$watchなどを使用して、値をng-modelにリバウンドさせることができます。