angularjs - Is it normal that the external template is not fully compiled while running the directive's link function? -

angularjs - Is it normal that the external template is not fully compiled while running the directive's link function? -

let's assume directive mydirective: <my-directive></my-directive>. when compiled, should replaced next external template:

<my-button>mybuttonlabel</my-button>

this my-button should replaced @ own compilation by:

<button class="btn btn-primary">mybuttonlabel</button>

so in jasmine test, invoke following:

element = angular.element( '<directive1></directive1>' ); compiledelement = $compile(element)($scope); $scope.$digest(); console.log(compiledelement); //well displays: <button class="btn btn-primary">mybuttonlabel</my-button>

however, if place console.log in link function of mybutton directive, obtain:

<my-button>mybuttonlabel</my-button>

the my-button directive isn't recursively compiled !

is due manual $scope.$digest(); in unit test allow total compilation @ moment?

in contrary, when don't deal unit test: link: function (scope, elm, attrs, ctrl) { console.log(elm); //... displays whole compilation. imagine code executed before $scope.$digest();, @ line:

compiledelement = $compile(element)($scope);

i don't think jsfiddle/plunkr necessary. indeed, want know whether known case in unit testing.

take @ this

working demo

html

<div ng-controller="ctrl"> <my-directive></my-directive> <div>

script

app.directive('mydirective', function($compile){ homecoming { replace: true, transclude: false, restrict: 'e', scope: false, link: function postlink(scope, ielement, iattrs) { ielement.html('<my-button>mybuttonlabel</my-button>'); $compile(ielement.contents())(scope); } }; }); app.directive('mybutton', function() { homecoming { restrict: 'e', template:'<button class="btn btn-primary">mybuttonlabel</button>', replace: true }; }); jasmine test

jasmine test working demo

describe('myapp', function () { var element; beforeeach(function () { module('myapp'); element = angular.element('<my-directive></my-directive>'); inject(function ($rootscope, $compile) { var scope = $rootscope.$new(); $compile(element)(scope); scope.$digest(); }); }); it('says mybuttonlabel', function () { expect(element.text()).tobe('mybuttonlabel'); }); });

angularjs angularjs-directive jasmine angularjs-scope