Using scope data from controller in a directive

[Billy Figueroa]

Hi All. I know directives and scopes have been covered quite a lot all over the internet but I haven't found a real example for what I want.

I want to be able to access the scope from my main controller inside of a directive. Most of the posts I seen on this have to do with actually accessing attributes or values that are related to the directive it self. In this case what I want to do is grab some data that I got from the back end in my controller and then display that as part of a template in a directive...

Here is sample code...

App.js
'use strict';

var mintApp = angular.module('mintApp', ['ngRoute', 'ngProvider']);

mintApp.config(function ($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: '../../MINT/views/main.php',
        controller:  'MainController'
    })
    .when('/client/signup', {
        templateUrl: '../MINT/views/client-membership.php',
        controller:  'FormController'
    })
    .otherwise({redirectTo: '/'});
});


Controller...
mintApp.controller('FormController', function($scope, $http) {
    $scope.providerData  = {};

    $http.get('../MINT/scripts/php/get_providers.php')
    .success(function(data) {
        // console.log(data);
        $scope.providerData = data;
    });

});

Directive
'use strict';

angular.module('ngProvider', []).directive('providerList', ['$location', function($location) {
    return {
        restrict: 'A',
        replace: true,
        template: '<h1>$scope.providerData</h1>'
    };
}]);

Notice the $scope.providerData value I want to use in my template but how do I access this WITHOUT using a link function? and even if I do use a link function how?

[Luke Kende]

It's better practice I believe to pass in data as attributes than just expecting the scope data to be there, but just use interpolation in your template as by not setting isolated scope, the template will interpolate against the current scope:

<div ng-provider data="providerData"></div>

angular.module('ngProvider', []).directive('providerList', ['$location', function($location) {
    return {
        restrict: 'A',
        replace: true,

        template: '<h1>{{providerData}}</h1>'

    };
}]);

[Luke Kende]

Ignore the <div ng-provider> forgot to remove it before changing my example.

[Sander Elias]

Hi Billy,

Like Luke said, using the scope directly in your directives isn't best practice. It isn't because your directive is

now tightly coupled to your scope. This might not be a problem, but you need to be aware of it!

The code you have provided should just work, unless there are some issues in the parts you didn't show us.

If you want some more insights, put up a plunk, or fiddle, so we can see the code in action, and see where the problem is.

Regards

Sander