Can I Use One Angular Controller To Change Another?

June 25, 2024 Post a Comment

I'm taking a pool of random animals, displaying two, then when I click the button of one animal, I want that one to stay and the other to be swapped out for a new one. Right now, I

Solution 1:

If you only want simple event exchange between controllers you can use $scope.$emit and $scope.$on :

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

Solution 2:

As you stated, you can use Service to communicate to between controllers.

If you want to update other controller update automatically, you want to watch it.

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;
      functiongetAnimal() {
          return index;
      }
      functionsetAnimal(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><htmlng-app="root"><head><metacharset="utf-8" /><title>AngularJS Plunker</title><linktype="text/css"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script><scriptsrc="app.js"></script></head><body><divclass="row"><divclass="text-center"><h2>Pick an Animal</h2></div><divng-controller="leftAnimal"class="col-md-6"><divclass="animalImage"><imgclass="img-center"ng-src="{{animal.img}}"/></div><divclass="animalName">{{animal.name}}</div><divclass="animalDescription">{{animal.description}}</div><buttontype="button"ng-click="findNewAnimal()"class="btn btn-info img-center">
                Change
            </button></div><divng-controller="rightAnimal"class="col-md-6"><divclass="animalImage"><imgclass="img-center"ng-src="{{animal.img}}" /></div><divclass="animalName">{{animal.name}}</div><divclass="animalDescription">{{animal.description}}</div><buttontype="button"ng-click="findNewAnimal()"class="btn btn-info img-center">
                Change
            </button></div></div></body></html>

JavaScript Apprenticeships

Can I Use One Angular Controller To Change Another?

Solution 1:

Solution 2:

Post a Comment for "Can I Use One Angular Controller To Change Another?"