2 Controller mit AngularJS

2 Controller (Kategorienauswahl, Anzeige der Elemente)

by Erik Wegner

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="KategorienCtrl">
        Kategorien
        <ul>
            <li ng-repeat="kategorie in kategorien" ng-click="setKategorie(kategorie.id)">
                {{kategorie.title}}
            </li>
        </ul>
    </div>
    <div ng-controller="ArtikellisteCtrl">
        <span ng-mouseover="details()">{{kategorie}}</span>
    </div>
</div>

JavaScript

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

frontpageApp.controller(
    "KategorienCtrl", 
    ['$scope', '$rootScope',
    function($scope, $rootScope) {
        $scope.selectedKategorie = null;
        
        $scope.kategorien = [
            {id: 1, title: "A"},
            {id: 2, title: "B"}
        ];
        
        // Wenn der Benutzer auf eine Kategorie klickt
        $scope.setKategorie = function(id) {
            // Sende ein Ereignis
            $rootScope.$broadcast('kategorieChanged', id);
        }
    }]
);

frontpageApp.controller(
    "ArtikellisteCtrl",
    ['$scope', '$rootScope',
    function($scope, $rootScope) {
        $scope.kategorie = "";
        $rootScope.$on('kategorieChanged', function (e, id) {
        	$scope.kategorie = id;
        });
        
        $scope.details = function() {
            $scope.kategorie += ".";
        }
    }]
);