I have a weird case of angular scope mixup. Here's the plnkr: http://plnkr.co/edit/o8cyZXkHX8Lt9Vkbn0xm
The transcluded scope does not resolve appCtrl.testString, which is strange, because transcluded content should have the outside scope. What's even more strange is that num gets resolved correctly.
Also, data-test-attr gets the correct value on the element that ng-controller is defined.
This is a minimal working example, so solutions with reordering the elements or defining a scope in a different place do not really suit me. I'd rather hack the repeatedDirective somehow, if that's at all possible.
Here's the code:
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<repeated-directive ng-repeat="num in [1, 2, 3, 4, 5]" ng-controller="AppController as appCtrl" data-test-attr="{{appCtrl.testString}}">
<div>{{num}} - {{appCtrl.testString}}</div>
</repeated-directive>
</body>
</html>
script.js
angular.module('app', [])
.controller('AppController', AppController)
.directive('repeatedDirective', repeatedDirective);
function AppController($scope) {
this.testString = 'Controller value';
}
function repeatedDirective() {
return {
transclude: true,
template: '<div ng-transclude></div>'
};
}
2 Answers 2
Your controller is not in scope of your directive:
this fixes it without changing anything in your html:
angular.module('app', [])
.controller('AppController', AppController)
.directive('repeatedDirective', repeatedDirective);
function AppController($scope) {
this.testString = 'Controller value';
}
function repeatedDirective() {
return {
transclude: true,
template: '<div></div>',
link: function(scope, element, attrs, ctrl, transclude) {
transclude(scope, function(clone, scope) {
element.append(clone);
});
}
};
}
http://plnkr.co/edit/LsRfyw98f4BP4G72Bgd6?p=preview
This way your transclusion does not use a seperate scope but takes the scope of the controller.
e voila
for more information on what exactly is happening I will include a reference blog :
http://angular-tips.com/blog/2014/03/transclusion-and-scopes/
Comments
Within your ng-repeat, you have your scope of [1, 2, 3, 4, 5] and not the appCtrl which explains the empty value of testString (actually it is unexisting). You should access the $parent to be able to have your appCtrl scope.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<repeated-directive ng-repeat="num in [1, 2, 3, 4, 5]" ng-controller="AppController as appCtrl" data-test-attr="{{appCtrl.testString}}">
<div>{{num}} - {{$parent.appCtrl.testString}}</div>
</repeated-directive>
</body>
</html>