2017-10-18 6 views
0

私は2つの子コントローラの間でデータを渡そうとしています。 工場でこれをやろうとしています。ファクトリを持つコントローラ間でどのように値が渡されますか?

testFactory.js異なるJSファイルで

  app= angular.module('testApp'); 
      app.factory('values', [function() { 

    var testValues= { 
     valueA: '' 
    }; 

    return { 
     setValueA: function(a) { 
      testValues.valueA= a; 
     }, 
     getValueA: function() { 
      return testValues.valueA; 
     } 
    }; 
}]); 

ので、異なるコントローラ。 controller1.js(この1つは値を設定)

angular.module('testApp') 
    .controller('firstCtrl', ['$scope''values', 
     function ($scope, values) { 

     values.setValueA("MyTestValue"); 

}]); 

controller2.jsこの値を読み出します。

angular.module('testApp') 
    .controller('secondCtrl', [ '$scope', 'values', 
     function ($scope, values) { 

     $scope.valueA = values.getValueA(); 

}]); 

HTML側にjsが含まれています。どちらのコントローラも工場を見る(私はデバッグ中にその機能を見ることができる)。私の問題は、第二の問題は何の価値もないことです。その新しい方法のように。私は何が欠けているか分からない?

+0

'firstCtrl'が初期化されるまでに' firstCtrl'が完全に初期化されるという保証はないので、 'firstCtrl'で設定された値は設定されないかもしれません。これらの値を同期させる最も簡単な方法は、 'values.getValueA();'に '$ scope。$ watch'を使うことです。 – laughingpine

+0

まだfirstCtrlとsecondCtrlに(工場から返された)サービスを注入しようとしましたか? – Andrea

答えて

0
The code Looks fine. I made a sample to replicate the same. working code is below 



<!DOCTYPE html> 
<html ng-app="myapp"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
    <script src="app.js"></script> 
    </head> 

    <body > 
    <div> 
     <h1>Services</h1> 
     <div ng-controller="secondCtrl as list"> 
     <p ng-repeat="value in list.values">{{ value.valueA }}</p> 
     </div> 

     <div ng-controller="firstCtrl as post"> 
     <form ng-submit="post.addValue(post.newValue)"> 
      <input type="text" ng-model="post.newValue"> 
      <button type="submit">Add Message</button> 
     </form> 
     </div> 
    </div> 
    </body> 
</html> 




    var app = angular.module('myapp', []); 

    app.factory('values', function(){ 

     var values = {}; 
     values.list = []; 
     values.list.push({valueA: 'hellomessage'}); 
     values.add = function(message){ 
      values.list.push({valueA: message}); 
     }; 

     return values; 
    }); 

    app.controller('firstCtrl', function (values){ 
     var self = this; 
     self.newValue = 'First Value'; 
     self.addValue = function(value){ 

     values.add(value); 
     self.newValue = ''; 
     }; 

    }); 

    app.controller('secondCtrl', function (values){ 
     var self = this; 

     self.values = values.list; 
    }); 
+0

私はこれが動作することを疑うことはありません。私の問題は、別のファイルに分割したときに消えてしまうようなものです。 first.htmlには、scriptタグを含むファクトリへのリンクがあります。 second.htmlには、スクリプトタグ付きのファクトリへのリンクも必要です。 各コントローラは工場を新しいものに初期化するようです。 工場を呼び出す方法がわからないので、毎回初期化されません。 –

関連する問題