Trying to use a transcluding directive within another controller, but the inner scope isn't being redefined as expected. Despite trying different methods, I can't seem to figure out what's going wrong.
The simplified code looks like this:
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<mydirective>
{{foo}}
</mydirective>
</body>
</html>
JavaScript:
angular.module('app', [])
.controller('MainCtrl', function($scope) {
$scope.foo = 'bar';
})
.controller('InDirectiveController', function($scope) {
$scope.foo = 'baz';
})
.directive('mydirective', function() {
return {
restrict: 'EA',
scope: false,
template:'<div ng-controller="InDirectiveController">'+
'{{foo}} <inside></inside>'+
'</div>',
transclude:true,
link: function(scope, element, attrs, ctrl, transclude) {
transclude(scope, function(clone, scope) {
element.find("inside").append(clone);
});
}
};
});
Example here
http://jsbin.com/wuqoqalenu/1/edit?html,js,output
Expected output: "baz baz", but actually getting "baz bar". Unsure how to make the transcluded code use the specific scope set in the controller.