AngularJS : ng-controller on directive does not work on transcluded elements within directive

angularjs, angularjs-directive, javascript, transclusion

Solution

1) The problem is `ng-transclude`'s scope is the sibling scope of your directive. When you put the `ng-controller` to a parent element, the scope created by `ng-controller` is parent scope of both your directive and `ng-transclude`. Due to scope inheritance, the transcluded element is able to bind the `{{target}}` correctly.

2) You could do that using custom transclusion to bind the scope yourself

.directive('mySalutation',function(){
    return {
        restrict:'E',
        scope:true,
        replace:true,
        transclude:true,
        template:'<div>Hello<div class="transclude"></div></div>',
        compile: function (element, attr, linker) {
            return function (scope, element, attr) {
                linker(scope, function(clone){
                       element.find(".transclude").append(clone); // add to DOM
                });

            };
        }
    };
})

DEMO

Or using the transclude function in the link function:

.directive('mySalutation',function(){
    return {
        restrict:'E',
        scope:true,
        replace:true,
        transclude:true,
        template:'<div>Hello<div class="transclude"></div></div>',
        link: function (scope, element, attr,controller, linker) {
           linker(scope, function(clone){
                  element.find(".transclude").append(clone); // add to DOM
           });
        }
    };
})

DEMO

Problem

Here is my script: ``` angular.module('MyApp',[]) .directive('mySalutation',function(){ return { restrict:'E', scope:true, replace:true, transclude:true, template:'<div>Hello<div ng-transclude></div></div>', link:function($scope,$element,$attrs){ } }; }) .controller('SalutationController',['$scope',function($scope){ $scope.target = "StackOverflow"; }]) ``` and the html: ``` <body ng-app="MyApp"> <my-salutation ng-controller="SalutationController"> <strong>{{target}}</strong> </my-salutation> </body> ``` The problem is , when `SalutationController` is applied on `my-salutation` directive, `$scope.target` is not visible for transcluded element.But if I put `ng-controller` on `<body>` or on `<strong>` element, it works. As docs says, `ng-controller` creates new scope. Who can explain, how that scope and the scope of the directive are interfering with each other in this case? How can I put controller on directive? Any hints will be appreciated.

Original source