CODEWITHSUNDEEP
javascriptangularjs
Martin-
Martin-

Reputation: 917

Calling a another controller inside a view - Angular

I have created this plunker http://plnkr.co/tVMVGdbPtJ05wR2WPwbi

The idea is the user list can be created from every controller by using the directive.

app.directive('userHtml', function() {
    return {
        scope: {
            user: '=',
        },
        restrict: 'A',
        templateUrl: 'user.html'
    }
});

And the template

<span>ID: {{ user.id }}</span>
<span><a href="#" onclick="StatsCtrl.viewData()" data-id="{{user.id}}">Name: {{ user.name }}</a></span>

Inside the directive template I want to show more data of the user. So I created a controller for this

app.controller('StatsCtrl', ['$scope', function($scope) {

  $scope.data = '';

  $scope.viewData = function() {
    $scope.data = 'Hello World';
  }

}])

So I made my links in the directive as onclick="StatsCtrl.showPlayer()" but Im just getting "StatsCtrl is not defined"

What is the correct method to do this?

Upvotes: 0

Views: 420

Answers (3)

Abhilash Augustine
Abhilash Augustine

Reputation: 4208

How do you specify use StatsCtrl as your directive's controller?

I have a better idea !!!

You can pass your controller objects to your directive, so that your directive can get this data always at anywhere with in the scope of your data.

Say,

You want to use details of all users in your directive. You can pass this object to your directive directly. 

<my-directive user-data="myScopeVariable"> </my-directive>

Here, the variable myScopeVariable is a variable of your existing controller and it contains the details of all users.

myApp.Controller('myController', function($scope){
    $scope.myScopeVariable = []; // may be a list of user details
});

And your directive should be look like this,

myApp.directive('myDirective', function(){
    return {
        scope : {
           userData : '=' // here you are specifying that you have an attribute with name 'user-data' and convert it's value to my directive's scope as $scope.userData
        },
        restrict: 'AE',
        templateUrl: 'user.html',
        link : function (scope, element, attrs){
             // this is your directive's controller
             // Here you can get user details as
             scope.userData;

             scope.ViewData = function(){
                 // This is your custom function
             }
        }
    }
});

So, now you can use userData as list or object of your user details,

<span>ID: {{ userData.user.id }}</span>
<span><a href="#" onclick="viewData()" data-id="{{userData.user.id}}">Name: {{ userData.user.name }}</a></span>

Hope this will help you.

Upvotes: 1

Emir Marques
Emir Marques

Reputation: 2687

Change user.html:

<span>ID: {{ user.id }}</span>
<span><a href="#" onclick="StatsCtrl.viewData()" data-id="{{user.id}}">Name: {{ user.name }}</a></span>

To:

<div ng-controller="StatsCtrl">
<span>ID: {{ user.id }}</span>
<span><a href="#" ng-click="viewData()" data-id="{{user.id}}">Name: {{ user.name }} {{data}}</a></span>
</div>

Upvotes: 0

Maarten
Maarten

Reputation: 4671

if I understand correctly, a directive needs to access data which you have on a controller? Then put that data on a service, a service being a singleton you can inject it in the controller and the directive and then both can access that data.

The way you are doing it now is wrong in several ways. You cannot call the controller like that without using 'controller as' syntax, and you can't and would not want to be dependent on parent child scope inheritance for getting to data.

Upvotes: 0

Related Questions