AngularJS: how to split functionality into many controllers

Question

I have a single controller in my application http://jsfiddle.net/HKF9h/:

<div ng-controller="MyCtrl">
    All Items:
    <ul>
        <li ng-repeat="item in items">{{item }} - 
            <a href="" ng-click="like(item)">like it</a>
        </li>
    </ul>
    Items you liked:
    <ul>
        <li ng-repeat="item in likedItems">{{item }}
        </li>
    </ul>
</div>

<script type="text/javascript">
var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.items= ['foo', 'bar', 'z'];
    $scope.likedItems = [];

    $scope.like = function (item) {
        if($scope.likedItems.indexOf(item) === -1) {
            $scope.likedItems.push(item);         
    }
}
</script>
}

I would like move all 'favoriting' functionality into sep controller that can be reused later. Here's what i did, but repeater is not showing likedItems anymore. What did I do wrong? http://jsfiddle.net/MR8wz/

<div ng-controller="MyCtrl">
    All Items:
    <ul>
        <li ng-repeat="item in items">{{item }} - 
            <a href="" 
               ng-controller="FavoriteCtrl" 
               ng-click="like(item)">like it</a>
        </li>
    </ul>
    Items you liked:
    <ul ng-controller="FavoriteCtrl">
        <li ng-repeat="item in likedItems">{{item }} //this one does not trigger
        </li>
    </ul>
</div>

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

function MyCtrl($scope) {
    $scope.items= ['foo', 'bar', 'z'];
}

function FavoriteCtrl($scope) {
    $scope.likedItems = [];
    $scope.like = function (item) {
        console.log('you liked', item); //this one is displayed
        if($scope.likedItems.indexOf(item) === -1) {
            $scope.likedItems.push(item);         
        }
    }
}

Not related but if you use ng-app='myApp' and you set a module ref to it : var myAppModule = angular.module('myApp', []); so please attach the controller to it also : myAppModule.controller('TextController',... this is the whole idea of not pulliting the global namespace — Royi Namir
– Royi Namir, Commented Jan 12, 2014 at 9:23
Seems like controllers are not intended for reuse, are they? — Dziamid
– Dziamid, Commented Jan 12, 2014 at 9:27
Yes, controllers are not for reuse, controllers are tightly couple with templates. — Tasnim Reza
– Tasnim Reza, Commented Jan 12, 2014 at 9:40

Stewie · Accepted Answer · 2014-01-12 09:13:22Z

2

You shouldn't really be relying on controller inheritance for sharing data. It's a bad case of close coupling. In Angular, if you want to share data, you're advised to use services/factories because:

They're easily injectable anywhere you need them
They're easily mockable
They're easily testable

FIDDLE

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

myApp.factory('Favorite', function(){
    var likedItems = [];

    function like(item) {
        console.log('you liked', item); //this one is displayed
        if(likedItems.indexOf(item) === -1) {
            likedItems.push(item);         
        }
    }

    function getLikedItems(){
        return likedItems;
    };

    return {
        like: like,
        getLikedItems: getLikedItems
    };
});

function MyCtrl($scope, Favorite) {
    $scope.favorite = Favorite;
    $scope.items = ['foo', 'bar', 'z'];
}

function FavoriteCtrl($scope, Favorite) {
    $scope.likedItems = Favorite.getLikedItems();
}

<div ng-controller="MyCtrl">
    All Items:
    <ul>
        <li ng-repeat="item in items">{{item }} - 
            <a href="" 
               ng-controller="FavoriteCtrl" 
               ng-click="favorite.like(item)">like it</a>
        </li>
    </ul>
    Items you liked:
    <ul ng-controller="FavoriteCtrl">
        <li ng-repeat="item in likedItems">{{item }}
        </li>
    </ul>
</div>

answered Jan 12, 2014 at 9:13

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Royi Namir Over a year ago

off-topic ,related , can u please have a look at this

Dziamid Over a year ago

So in this case we don't really need FavoriteCtrl in this view, do we? jsfiddle.net/DFus9/1

Stewie Over a year ago

No, you don't. But the example is there to show how to share data between controllers, without relying on controller inheritance.

Tasnim Reza · Accepted Answer · 2014-01-12 09:45:51Z

0

You use ng-controller directive two times

<a href="" ng-controller="FavoriteCtrl" ng-click="like(item)">like it</a>

and

<ul ng-controller="FavoriteCtrl">

It creates two different scope this is the reason it doesn't work. So if you move

$scope.likedItems = []; in parent controller MyCtrl then it works. Updated fiddle

edited Jan 12, 2014 at 9:45

answered Jan 12, 2014 at 9:21

Tasnim Reza

6,0603 gold badges27 silver badges31 bronze badges

1 Comment

Dziamid Over a year ago

Thanks, but there's no real reuse, because I need likedItems array in FavoriteCtrl as well. jsfiddle.net/MR8wz/4

Collectives™ on Stack Overflow

AngularJS: how to split functionality into many controllers

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related