I am new to Angular and trying to understand advanced directive API - I want to re-create directive template in compile function using directive element attributes. But when I don't have a template set (or template is empty string) instead accesing isolated directive scope I access parent (controller) scope. Also - this works on Angular 1.1 but not 1.2
here is HTML:
<div class="container" ng-app="app" ng-controller="AppController">
<sandbox title="Attribute Title"></sandbox>
</div>
JavaScript:
var app = angular.module('app', [], function () {});
app.controller('AppController', function ($scope) {
$scope.title = "AppController title";
});
app.directive('sandbox', function ($log, $compile) {
return {
restrict: 'E',
scope: {
title: "@"
},
controller: function ($scope, $element, $attrs) {
$scope.title = "Directive Controller title";
},
template: '<h1>Template</h1>', // change it to: '' and Run, than change Angular to 1.2.x
compile: function (tElement, tAttrs) {
tElement.append('<h2> Title = {{ title }}</h2>');
}
}
});
When you Run it you get:
Template
Title = Attribute Title
But when you change template to empty string you get with Angular 1.2:
Title = AppController Title
And with Angular 1.1.1:
Title = Attribute Title
My Questions:
Why there is a difference in accesing scope when template is set AND when it's not set?
Why there is a difference between Angular 1.1 and 1.2 (bug? - directive without 'template'and with isoleted scope acceses controller scope not directive scope ) ?
How can I build template that accesses isolated scope NOT parent scope in Angular 1.2 in compile function ?
Why directive controller function does not change 'title' using $scope.title = "..." - but when debugging 'scope' param in 'link' function 'title' value is 'Directive Controler Title' but it internally (WHERE to look for it) binds isoleted scope 'Attribute Value' ?
Here is JSFiddle to play with: http://jsfiddle.net/yoorek/zQ66L/4/
