Acessing inline-controller variable from directive template in AngularJS

Question

Here is a fiddle representing my problem: https://jsfiddle.net/m9t7ew8j/1/

The essential part of the code that matters is the following:

   .directive('firstDirective', [function () {
        return {
            restrict: 'E',
            template: '<div>This is a directive.
                        Here is a scope variable
                        pre-defined: {{name}} </div>', // <---- this is the problem
            controller: ['$q', function ($q) {
                var vm = this;
                vm.name = 'something';
            }]
        }
    }])

Basically, the controller has no name because it's an inline-controller, so how do I represent it in the template attribute? Do I have to actually declare the controller like the following?

    .controller('secondController', [function(){
        var vm = this;
        vm.name = 'John Snow';
    }])
    .directive('secondDirective', [function(){
        return {
        restrict: 'E',
        template: '<div>This is a directive.
                   Here is a scope variable
                   pre-defined: {{vm.name}} </div>', // <- declaring as vm.name will work
        controller: 'secondController as vm'
      }

sreeramu · Accepted Answer · 2016-04-14 23:34:38Z

2

I think in your controller you want to get the $scope and assign the variable to $scope.

.directive('firstDirective', [function () {
        return {
            restrict: 'E',
            template: '<div>This is a directive.
                        Here is a scope variable
                        pre-defined: {{name}} </div>',
            controller: ['$scope','$q', function ($scope,$q) {
                $scope.name = 'something';
            }]
        }
    }])

demo : http://plnkr.co/edit/uzudOphRL8QO6utEBF4F?p=preview

From achieving using this

.directive('firstDirective', [function () {
        return {
            restrict: 'E',
            template: '<div>This is a directive.
                        Here is a scope variable
                        pre-defined: {{vm.name}} </div>',
            controllerAs: 'vm',
            controller: ['$q', function ($q) {
                var vm = this;
                vm.name = 'something';
            }]
        }
    }])

edited Apr 14, 2016 at 23:34

answered Apr 14, 2016 at 22:15

sreeramu

1,22312 silver badges21 bronze badges

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

1 Comment

Marco Aurélio Deleu Over a year ago

No way to do this using this instead of $scope?

Collectives™ on Stack Overflow

Acessing inline-controller variable from directive template in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related