如何在第一個控制器中調用第二個控制器後才能在AngularJs中執行的控制器中的某個函數

我正嘗試在AngularJs中的兩個不同控制器之間進行通信。我想實現的目標是在第一個控制器中使用變量的值，一旦通過用戶下拉選擇而不是我設置的默認值。但不幸的是第二個控制器使用第二個控制器中的變量的默認值。如何在第一個控制器中調用第二個控制器後才能在AngularJs中執行的控制器中的某個函數

我是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>

代碼和HTML的樣子以下

<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>

來源

2016-09-29 Ashuotsh Pandey

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>

來源

2016-09-29 20:55:21 ram1993

使用controllerAs以避免錯誤。您應該創建第三個控制器，並將數據綁定到它或在組件體系結構中重寫它。

<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>

來源

2016-09-29 12:50:05

如何在第一個控制器中調用第二個控制器後才能在AngularJs中執行的控制器中的某個函數

回答

相關問題