angularjs - I can pass a scope variable into a directive's link function, but not the compile function, angular -

i'm using ng-repeat , need pass scope variable directive's compile function. know how link function, not compile function.

my html looks like:

    <div ng-repeat="item in chapter.main">       <block type="item.type"></block>     </div> 

let's item.type="blah" no matter item. link function works fine

app.directive('block', function() {   return {       restrict: 'e',       link: function(scope, element, attributes){             scope.$watch(attributes.type, function(value){                 console.log(value); //will output "blah" correct             });          }   } }); 

but can't same compile?

app.directive('block', function() {   return {       restrict: 'e',       compile: function(element, attrs, scope) {         scope.$watch(attrs.type, function(value){              console.log(value);          });       }   } }); 

the error "cannot read property $watch of undefined"..

this how i'd directive like:

app.directive('block', function() {   return {       restrict: 'e',       compile: function(element, attrs) {         element.append('<div ng-include="\'{{type}}-template.html\'"></div>');         //or element.append('<div ng-include="\'{' + attrs.type + '}-template.html\'"></div>');         //except above won't interpret attr.type variable, literal string 'item.type'       }   } }); 

the compile function doesn't have scope 1 it's parameter.

function compile(telement, tattrs, transclude) { ... }

note: transclude deprecated in latest version of angular.

is there reason don't want use link?

from doc

the compile function deals transforming template dom. since directives not template transformation, not used often. compile function takes following arguments:

telement - template element - element directive has been declared. safe template transformation on element , child elements only.

tattrs - template attributes - normalized list of attributes declared on element shared between directive compile functions.

transclude - [deprecated!] transclude linking function: function(scope, clonelinkingfn)

update

to access scope inside compile function, need have either prelink or postlink function. in case, need postlink function. ...

compile: function compile(telement, tattrs, transclude) {     return function postlink(scope, element, attrs) { ... } }, 

proposed solution might not exact should on way.

html

<div ng-app="myapp" ng-controller="app">     <block type="item.type"></block> </div> 

js (controller + directive)

var myapp = angular.module('myapp', []);  myapp.controller('app', function ($scope, $http) {     $scope.item = {         type: 'sometmpl'     }; }).directive('block', ['$compile', function ($compile) {     return {         restrict: 'ae',         transclude: true,         scope: {             type: '='         },         compile: function (element, attrs) {             return function (scope, element, attrs) {                 var tmpl;                 tmpl = scope.type + '-template.html';                  console.log(tmpl);                  element.append('<div ng-include=' + tmpl + '></div>');                  $compile(element.contents())(scope);             };         }     }; }]);