In Angular how to share controller of a directive to its child content (when transclude is true)?

Question

I tried searching for the references on SO. But not satisfied with answers. I am a newbie in Angular. I am trying to achieve transclusion by creating directive like this :

app.directive('wrapperDirective',function(){        
        return{            
            restrict :'E',           
            controller:'wrapperCtrl',
            template :'<div class="widget-template" ng-transclude></div>',
            transclude: true,
            replace:true,
            scope:{              
              cityList : '='
            }            
        }        
    });

app.controller('wrapperCtrl', ['$scope',function($scope, $rootScope){
        $scope.citynames = $scope.cityList;
});




<wrapper-directive cityList="Bangalore">    
     <div>{{ citynames  }}</div>
 </wrapper-directive>

Now how do I make the data available declared as attribute on to the child content. I am really confused please help.

score 1 · Answer 1 · answered Jun 07 '16 at 18:14

Be carrefull when you used scope and directive you can have mixed up due to the controller can have is own scope.

One other way to do this is to used the controller as syntax. Simply declared in your controller something like :

function myController($scope) {
    var vm = this;
    vm.yourAttribute = value;
}

Like that you can access your controller attributes by using

 wrapperCtrl.yourAttribute

And if writing wrapperCtrl.yourAttributesis too long you can used the attribute controller as like following

app.directive('wrapperDirective',function(){        
        return{            
            restrict :'E',           
            controller:'wrapperCtrl',
            controllerAs: 'yourname',
            template :'<div class="widget-template" ng-transclude></div>',
            transclude: true,
            replace:true,
            scope:{              
              cityList : '='
            }            
        }    


});

to only do yourname.yourAttribute when you want to access attributes

In Angular how to share controller of a directive to its child content (when transclude is true)?

1 Answers1