Kann ich einen Winkelregler verwenden, um einen anderen zu ändern?

Ich nehme einen Pool zufälliger Tiere, zeige zwei, und wenn ich auf den Knopf eines Tieres klicke, möchte ich, dass einer bleibt und der andere wird gegen einen neuen getauscht. Gerade jetzt kann ich das Tier, das ich im Auge behalten möchte, ändern, aber ich kann nicht herausfinden, wie ich "übergreifen" und die Sicht des anderen Kontrollers ändern kann.Kann ich einen Winkelregler verwenden, um einen anderen zu ändern?

Ich habe versucht, ng-click = "left.findNewAnimal()" auf der rechten Seite, aber ich habe keine Antwort beim Klicken. Ich habe auch mit einem service or factory betrachtet, aber ich gebe keine Daten zwischen den Controllern, ich möchte die Daten von einem, von den anderen zu ändern. Wie kann dies erreicht werden?

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>

Quelle

2016-05-23 Taylor N

Wenn Sie nur einfache Ereignisaustausch zwischen Controllern möchten, können Sie $ Bereich verwenden $ emittieren und $ scope $ auf:..

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

Quelle

2016-05-23 19:23:08 shershen

Wie Sie bereits erwähnt haben, können Sie den Dienst zur Kommunikation zwischen Controllern verwenden.

Wenn Sie ein anderes Controller-Update automatisch aktualisieren möchten, möchten Sie es sehen.

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>

Quelle

2016-05-23 20:13:41 Win

Vielen Dank für die Zeit, mir zu helfen nehmen, aber das ändert sich die beiden Bilder, und ich möchte nur ein –

ich den Code aktualisiert ändern. Wenn auf eine Schaltfläche geklickt wird, wird das Bild eines anderen Controllers geändert. – Win

Kann ich einen Winkelregler verwenden, um einen anderen zu ändern?

Antwort

Verwandte Themen