2016-09-29 7 views
0

AngularJsの2つの異なるコントローラ間で通信しようとしています。私が達成したい目標は、私が設定したデフォルト値ではなく、ユーザーがドロップダウンして最初のコントローラで変数の値を使用することです。残念なことに第2コントローラは第2コントローラのvariableのデフォルト値を使用していました。AngularJsで実行されているコントローラ1の特定の機能の後に初めてコントローラから2番目のコントローラを呼び出す方法

私はAngularの初心者ですので、正しく表現されていないと思ったら私を許してください。私はデータ科学のバックグラウンドです。 は、ここで私は

<script> 

    var app = angular.module("BuildApp", []); 
    app.run(function ($rootScope) { 
     $rootScope.$on('scope.stored', function (event, data) { 
      console.log("scope.stored", data); 
     }); 
    }); 

    app.controller("BranchController", function ($scope, $http, Scopes) { 
     Scopes.store('BranchController', $scope); 
     $http.get('http://192.168.3.96:8082/engine-api/1.1/builds/getbranch'). 
     success(function (data, status, headers, config) { 
      $scope.branchs = data; 
     }). 
     error(function (data, status, headers, config) { 
      console.log('Api call failed', status) 
     }); 

     $scope.selectedBranch = 'Nothing Selected'; 
     $scope.dropboxitemselectedbranch = function (item) { 
      $scope.selectedBranch = item; 
     } 
    }); 

    app.controller("KitController", function ($scope, $http, Scopes) { 
     Scopes.store('KitController', $scope); 
     var url = 'http://192.168.3.96:8082/engine-api/1.1/builds/getkit?Branch=' + Scopes.get("BranchController").selectedBranch; 
     console.log(url) 
     $http.get(url). 
     success(function (data, status, headers, config) { 
      $scope.kits = data; 
     }). 
     error(function (data, status, headers, config) { 
      console.log('Api call failed', status) 
     }); 
     $scope.selectedKit = "Nothing Selected"; 
     $scope.dropboxitemselectedkit = function (item) { 
      $scope.selectedKit = item; 
     } 
    }); 

    app.factory('Scopes', function ($rootScope) { 
     var mem = {}; 

     return { 
      store: function (key, value) { 
       mem[key] = value; 
      }, 
      get: function (key) { 
       return mem[key]; 
      } 
     }; 
    }); 
</script> 

を使用していたコードやバグを回避するために

<body ng-app="BuildApp"> 
<h1>Branch</h1> 
<div ng-controller="BranchController"> 
    <div class="dropdown"> 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> {{selectedBranch}} 
      <span class="caret"></span></button> 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" > 
      <li ng-repeat="branch in branchs"><branch ng-click = "dropboxitemselectedbranch(branch.name)"> {{branch.name}} </branch></li> 
     </ul> 
    </div> 
</div> 

<h1>Kit</h1> 

<div ng-controller="KitController"> 
    <div class="dropdown"> 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> {{selectedKit}} 
      <span class="caret"></span></button> 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu2" > 
      <li ng-repeat="kit in kits"><kit ng-click = "dropboxitemselectedkit(kit.name)">{{kit.name}}</kit></li> 
     </ul> 
    </div> 
</div> 

</body> 

答えて

0

var app = angular.module("myApp",[]); 
 

 
//controllers declaration 
 
app.controller('myCtrl1',function($scope, $rootScope){ 
 
    $scope.selectedOption = "option-1"; 
 
    $scope.change = function() { 
 
     $rootScope.$emit('changeName',{selectedOption:$scope.selectedOption}); 
 
    } 
 
}); 
 

 
app.controller('myCtrl2',function($scope, $rootScope){ 
 
    $scope.selectedOption = "option-2"; 
 
    $rootScope.$on('changeName', function(event,data) { 
 
     $scope.selectedOption = data.selectedOption; 
 
    }) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 

 
<span class="div1" ng-controller="myCtrl1"> 
 
    <select ng-model="selectedOption" ng-change="change()"> 
 
     <option value="option-1">Option 1</option> 
 
     <option value="option-2">Option 2</option> 
 
     <option value="option-3">Option 3</option> 
 
     <option value="option-4">Option 4</option> 
 
     <option value="option-5">Option 5</option> 
 
    </select> 
 
</span> 
 

 
<span class="div2" ng-controller="myCtrl2"> 
 
    <select ng-model="selectedOption"> 
 
     <option value="option-1">Option 1</option> 
 
     <option value="option-2">Option 2</option> 
 
     <option value="option-3">Option 3</option> 
 
     <option value="option-4">Option 4</option> 
 
     <option value="option-5">Option 5</option> 
 
    </select> 
 
</span> 
 
    
 
</body>

0

使用controllerAsを、以下のようなHTMLを見ています。 3番目のコントローラを作成し、それにデータをバインドするか、コンポーネントアーキテクチャで書き直す必要があります。

<div ng-controller="Parent as parent"> 
    <div ng-controller="Child1 as c1"> 
     <button ng-click="parent.myData = c1.doInterestingMagic()" ></button> 

    </div> 
    <div ng-controller="Child2 as c2"> 
     <span ng-bind="parent.myData || c2.defaultMyData"></span> 
    </div> 

</div> 
関連する問題