Angularコントローラーを使用して別の角度コントローラーを変更できますか？

ランダムな動物のプールを2つ表示していますが、1つの動物のボタンをクリックすると、その動物を残し、もう1つを新しいものに交換します。今は、私が見たいと思っている動物を変えることはできますが、他のコントローラーの視点をどのように変えて変えるのかを理解することはできません。Angularコントローラーを使用して別の角度コントローラーを変更できますか？

右側にng-click = "left.findNewAnimal（）"を設定しようとしましたが、クリック時に応答がありません。私もservice or factoryを使ってみましたが、私はコントローラ間でデータを共有していません。もう一方のコントローラのデータを変更したいと思います。これはどのように達成できますか？

JavaScriptを：あなたが唯一のコントローラ間の単純なイベント交換をしたい場合は

angular.module("root", []) 
 
    .controller("leftAnimal", ["$scope", 
 
    function($scope) { 
 
     var self = this; 
 
     var animal 
 

 
     $scope.findNewAnimal = function() { 
 
     var randNum = Math.floor(Math.random() * animalPool.length); 
 
     animal = animalPool[randNum]; 
 
     animalPool.splice(randNum, 1) 
 
     changeAnimal(); 
 
     }; 
 
     $scope.findNewAnimal(); 
 

 
     function changeAnimal() { 
 
     $scope.name = animal.name; 
 
     $scope.img = animal.img; 
 
     } 
 
    } 
 
    ]) 
 
    .controller("rightAnimal", ["$scope", 
 
    function($scope) { 
 
     var self = this; 
 
     var animal 
 

 
     $scope.findNewAnimal = function() { 
 
     var randNum = Math.floor(Math.random() * animalPool.length); 
 
     animal = animalPool[randNum]; 
 
     animalPool.splice(randNum, 1) 
 
     changeAnimal(); 
 
     }; 
 
     $scope.findNewAnimal(); 
 

 
     function changeAnimal() { 
 
     $scope.name = animal.name; 
 
     $scope.img = animal.img; 
 
     } 
 
    } 
 
    ]) 
 
    .factory(); 
 

 

 

 
var Animal = function(data) { 
 
    this.name = data.name 
 
    this.img = data.img; 
 
    this.baby = data.baby; 
 
}; 
 

 
var animals = [{ 
 
    name: "Baby Quetzal", 
 
    img: "http://i.imgur.com/CtnEDpM.jpg", 
 
    baby: true 
 
}, { 
 
    name: "Baby Otter", 
 
    img: "http://i.imgur.com/1IShHRT.jpg", 
 
    baby: true 
 
}, { 
 
    name: "Baby Octopus", 
 
    img: "http://i.imgur.com/kzarlKW.jpg", 
 
    baby: true 
 
}]; 
 

 
var animalPool = []; 
 

 
var init = function() { 
 
    animals.forEach(function(animalData) { 
 
    animalPool.push(new Animal(animalData)); 
 
    }); 
 
} 
 
init();

<!doctype html> 
 
<html ng-app="root"> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/main.css"> 
 
</head> 
 

 
<body> 
 
    <div class="row"> 
 
    <div class="text-center"> 
 
     <h2>Pick an Animal</h2> 
 
    </div> 
 
    <div ng-controller="leftAnimal" class="col-md-6"> 
 
     <div class="animalImage"> 
 
     <img class="img-center" ng-src="{{img}}"> 
 
     </div> 
 
     <div class="animalName">{{name}}</div> 
 
     <div class="animalDescription">{{description}}</div> 
 
     <button type="button" ng-click="findNewAnimal()" class="btn btn-info img-center">{{name}}</button> 
 
    </div> 
 
    <div ng-controller="rightAnimal" class="col-md-6"> 
 
     <div class="animalImage"> 
 
     <img class="img-center" ng-src="{{img}}"> 
 
     </div> 
 
     <div class="animalName">{{name}}</div> 
 
     <div class="animalDescription">{{description}}</div> 
 
     <button type="button" ng-click="leftAnimal.findNewAnimal()" class="btn btn-info img-center">{{name}}</button> 
 
    </div> 
 
    </div> 
 
</body> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<script src="js/ang.js"></script> 
 

 
</html>

出典

2016-05-23 Taylor N

あなたは $スコープを使用することができます$発すると$スコープに$：。。

//right 
<button type="button" ng-click="emitEvent()" class="btn btn-info img-center">{{name}}</button> 

//right controller 
$scope.emitEvent = function(){ 
    $scope.$emit('changeAnimal'); 
} 

//left controller 
$scope.$on('changeAnimal', function(event){ 
    //do stuff 
})

More on $scope events in official docs

出典

2016-05-23 19:23:08 shershen

あなたが述べたように、サービスを使用してコントローラ間で通信することができます。

他のコントローラのアップデートを自動的にアップデートしたい場合は、それを見たいと思っています。

http://plnkr.co/edit/iLnlZDyR1cZUQIiJJJEp

(function() { 
 

 
angular.module("root", []) 
 
    .controller("leftAnimal", ["$scope", "animalService", 
 
    function ($scope, animalService) { 
 
     var source = false; 
 
     $scope.findNewAnimal = function() { 
 
      var randNum = Math.floor(Math.random() * animalPool.length); 
 
      console.log("Left Click Index: " + randNum); 
 
      animalService.setAnimal(randNum); 
 
      source = true; 
 
     }; 
 

 
     $scope.$watch(function() { 
 
      return animalService.getAnimal(); 
 
     }, function (value) { 
 
      if(!source) { 
 
       $scope.animal = animalPool[value]; 
 
      } 
 
      source = false; 
 
     }); 
 
    } 
 
    ]) 
 
    .controller("rightAnimal", ["$scope", "animalService", 
 
    function ($scope, animalService) { 
 
     var source = false; 
 
     $scope.findNewAnimal = function() { 
 
      var randNum = Math.floor(Math.random() * animalPool.length); 
 
      console.log("Right Click Index: " + randNum); 
 
      animalService.setAnimal(randNum); 
 
      source = true; 
 
     }; 
 

 
     $scope.$watch(function() { 
 
      return animalService.getAnimal(); 
 
     }, function (value) { 
 
      if(!source) { 
 
       $scope.animal = animalPool[value]; 
 
      } 
 
      source = false; 
 
     }); 
 
    } 
 
    ]) 
 
    .factory("animalService", [function() { 
 
     var index = 0; 
 
     function getAnimal() { 
 
      return index; 
 
     } 
 
     function setAnimal(newIndex) { 
 
      index = newIndex; 
 
     } 
 
     return { 
 
      getAnimal: getAnimal, 
 
      setAnimal: setAnimal, 
 
     } 
 
    }]); 
 

 
var animalPool = [{ 
 
    name: "Baby Quetzal", 
 
    img: "http://i.imgur.com/CtnEDpM.jpg", 
 
    baby: true 
 
}, { 
 
    name: "Baby Otter", 
 
    img: "http://i.imgur.com/1IShHRT.jpg", 
 
    baby: true 
 
}, { 
 
    name: "Baby Octopus", 
 
    img: "http://i.imgur.com/kzarlKW.jpg", 
 
    baby: true 
 
}]; 
 
})();

<!DOCTYPE html> 
 
<html ng-app="root"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 
<body> 
 
    <div class="row"> 
 
     <div class="text-center"> 
 
      <h2>Pick an Animal</h2> 
 
     </div> 
 
     <div ng-controller="leftAnimal" class="col-md-6"> 
 
      <div class="animalImage"> 
 
       <img class="img-center" ng-src="{{animal.img}}"/> 
 
      </div> 
 
      <div class="animalName">{{animal.name}}</div> 
 
      <div class="animalDescription">{{animal.description}}</div> 
 
      <button type="button" ng-click="findNewAnimal()" 
 
        class="btn btn-info img-center"> 
 
       Change 
 
      </button> 
 
     </div> 
 
     <div ng-controller="rightAnimal" class="col-md-6"> 
 
      <div class="animalImage"> 
 
       <img class="img-center" ng-src="{{animal.img}}" /> 
 
      </div> 
 
      <div class="animalName">{{animal.name}}</div> 
 
      <div class="animalDescription">{{animal.description}}</div> 
 
      <button type="button" ng-click="findNewAnimal()" 
 
        class="btn btn-info img-center"> 
 
       Change 
 
      </button> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-05-23 20:13:41 Win

私を助けるために時間を割いていただきありがとうございますが、これは両方の画像を変更し、私は唯一の私は、コードを更新1 –

を変更したいです。ボタンをクリックすると、他のコントローラーの画像が変更されます。 – Win

Angularコントローラーを使用して別の角度コントローラーを変更できますか？

答えて

関連する問題