aboutsummaryrefslogtreecommitdiffstats
path: root/test/ng/compilerSpec.js
diff options
context:
space:
mode:
Diffstat (limited to 'test/ng/compilerSpec.js')
-rw-r--r--test/ng/compilerSpec.js1811
1 files changed, 1811 insertions, 0 deletions
diff --git a/test/ng/compilerSpec.js b/test/ng/compilerSpec.js
new file mode 100644
index 00000000..dc2e20cf
--- /dev/null
+++ b/test/ng/compilerSpec.js
@@ -0,0 +1,1811 @@
+'use strict';
+
+describe('$compile', function() {
+ var element;
+
+ beforeEach(module(provideLog, function($provide, $compileProvider){
+ element = null;
+
+ $compileProvider.directive('log', function(log) {
+ return {
+ restrict: 'CAM',
+ priority:0,
+ compile: valueFn(function(scope, element, attrs) {
+ log(attrs.log || 'LOG');
+ })
+ };
+ });
+
+ $compileProvider.directive('highLog', function(log) {
+ return { restrict: 'CAM', priority:3, compile: valueFn(function(scope, element, attrs) {
+ log(attrs.highLog || 'HIGH');
+ })};
+ });
+
+ $compileProvider.directive('mediumLog', function(log) {
+ return { restrict: 'CAM', priority:2, compile: valueFn(function(scope, element, attrs) {
+ log(attrs.mediumLog || 'MEDIUM');
+ })};
+ });
+
+ $compileProvider.directive('greet', function() {
+ return { restrict: 'CAM', priority:10, compile: valueFn(function(scope, element, attrs) {
+ element.text("Hello " + attrs.greet);
+ })};
+ });
+
+ $compileProvider.directive('set', function() {
+ return function(scope, element, attrs) {
+ element.text(attrs.set);
+ };
+ });
+
+ $compileProvider.directive('mediumStop', valueFn({
+ priority: 2,
+ terminal: true
+ }));
+
+ $compileProvider.directive('stop', valueFn({
+ terminal: true
+ }));
+
+ $compileProvider.directive('negativeStop', valueFn({
+ priority: -100, // even with negative priority we still should be able to stop descend
+ terminal: true
+ }));
+ }));
+
+
+ afterEach(function(){
+ dealoc(element);
+ });
+
+
+ describe('configuration', function() {
+ it('should register a directive', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive('div', function(log) {
+ return {
+ restrict: 'ECA',
+ link: function(scope, element) {
+ log('OK');
+ element.text('SUCCESS');
+ }
+ };
+ })
+ });
+ inject(function($compile, $rootScope, log) {
+ element = $compile('<div></div>')($rootScope);
+ expect(element.text()).toEqual('SUCCESS');
+ expect(log).toEqual('OK');
+ })
+ });
+
+ it('should allow registration of multiple directives with same name', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive('div', function(log) {
+ return {
+ restrict: 'ECA',
+ link: log.fn('1')
+ };
+ });
+ $compileProvider.directive('div', function(log) {
+ return {
+ restrict: 'ECA',
+ link: log.fn('2')
+ };
+ });
+ });
+ inject(function($compile, $rootScope, log) {
+ element = $compile('<div></div>')($rootScope);
+ expect(log).toEqual('1; 2');
+ });
+ });
+ });
+
+
+ describe('compile phase', function() {
+
+ it('should wrap root text nodes in spans', inject(function($compile, $rootScope) {
+ element = jqLite('<div>A&lt;a&gt;B&lt;/a&gt;C</div>');
+ var text = element.contents();
+ expect(text[0].nodeName).toEqual('#text');
+ text = $compile(text)($rootScope);
+ expect(lowercase(text[0].nodeName)).toEqual('span');
+ expect(element.find('span').text()).toEqual('A<a>B</a>C');
+ }));
+
+ describe('multiple directives per element', function() {
+ it('should allow multiple directives per element', inject(function($compile, $rootScope, log){
+ element = $compile(
+ '<span greet="angular" log="L" x-high-log="H" data-medium-log="M"></span>')
+ ($rootScope);
+ expect(element.text()).toEqual('Hello angular');
+ expect(log).toEqual('H; M; L');
+ }));
+
+
+ it('should recurse to children', inject(function($compile, $rootScope){
+ element = $compile('<div>0<a set="hello">1</a>2<b set="angular">3</b>4</div>')($rootScope);
+ expect(element.text()).toEqual('0hello2angular4');
+ }));
+
+
+ it('should allow directives in classes', inject(function($compile, $rootScope, log) {
+ element = $compile('<div class="greet: angular; log:123;"></div>')($rootScope);
+ expect(element.html()).toEqual('Hello angular');
+ expect(log).toEqual('123');
+ }));
+
+
+ it('should ignore not set CSS classes on SVG elements', inject(function($compile, $rootScope, log) {
+ if (!window.SVGElement) return;
+ // According to spec SVG element className property is readonly, but only FF
+ // implements it this way which causes compile exceptions.
+ element = $compile('<svg><text>{{1}}</text></svg>')($rootScope);
+ $rootScope.$digest();
+ expect(element.text()).toEqual('1');
+ }));
+
+
+ it('should allow directives in comments', inject(
+ function($compile, $rootScope, log) {
+ element = $compile('<div>0<!-- directive: log angular -->1</div>')($rootScope);
+ expect(log).toEqual('angular');
+ }
+ ));
+
+
+ it('should receive scope, element, and attributes', function() {
+ var injector;
+ module(function($compileProvider) {
+ $compileProvider.directive('log', function($injector, $rootScope) {
+ injector = $injector;
+ return {
+ restrict: 'CA',
+ compile: function(element, templateAttr) {
+ expect(typeof templateAttr.$normalize).toBe('function');
+ expect(typeof templateAttr.$set).toBe('function');
+ expect(isElement(templateAttr.$element)).toBeTruthy();
+ expect(element.text()).toEqual('unlinked');
+ expect(templateAttr.exp).toEqual('abc');
+ expect(templateAttr.aa).toEqual('A');
+ expect(templateAttr.bb).toEqual('B');
+ expect(templateAttr.cc).toEqual('C');
+ return function(scope, element, attr) {
+ expect(element.text()).toEqual('unlinked');
+ expect(attr).toBe(templateAttr);
+ expect(scope).toEqual($rootScope);
+ element.text('worked');
+ }
+ }
+ };
+ });
+ });
+ inject(function($rootScope, $compile, $injector) {
+ element = $compile(
+ '<div class="log" exp="abc" aa="A" x-Bb="B" daTa-cC="C">unlinked</div>')($rootScope);
+ expect(element.text()).toEqual('worked');
+ expect(injector).toBe($injector); // verify that directive is injectable
+ });
+ });
+ });
+
+ describe('error handling', function() {
+
+ it('should handle exceptions', function() {
+ module(function($compileProvider, $exceptionHandlerProvider) {
+ $exceptionHandlerProvider.mode('log');
+ $compileProvider.directive('factoryError', function() { throw 'FactoryError'; });
+ $compileProvider.directive('templateError',
+ valueFn({ compile: function() { throw 'TemplateError'; } }));
+ $compileProvider.directive('linkingError',
+ valueFn(function() { throw 'LinkingError'; }));
+ });
+ inject(function($rootScope, $compile, $exceptionHandler) {
+ element = $compile('<div factory-error template-error linking-error></div>')($rootScope);
+ expect($exceptionHandler.errors[0]).toEqual('FactoryError');
+ expect($exceptionHandler.errors[1][0]).toEqual('TemplateError');
+ expect(ie($exceptionHandler.errors[1][1])).
+ toEqual('<div factory-error linking-error template-error>');
+ expect($exceptionHandler.errors[2][0]).toEqual('LinkingError');
+ expect(ie($exceptionHandler.errors[2][1])).
+ toEqual('<div class="ng-scope" factory-error linking-error template-error>');
+
+
+ // crazy stuff to make IE happy
+ function ie(text) {
+ var list = [],
+ parts, elementName;
+
+ parts = lowercase(text).
+ replace('<', '').
+ replace('>', '').
+ split(' ');
+ elementName = parts.shift();
+ parts.sort();
+ parts.unshift(elementName);
+ forEach(parts, function(value, key){
+ if (value.substring(0,3) == 'ng-') {
+ } else {
+ value = value.replace('=""', '');
+ var match = value.match(/=(.*)/);
+ if (match && match[1].charAt(0) != '"') {
+ value = value.replace(/=(.*)/, '="$1"');
+ }
+ list.push(value);
+ }
+ });
+ return '<' + list.join(' ') + '>';
+ }
+ });
+ });
+
+
+ it('should prevent changing of structure', inject(
+ function($compile, $rootScope){
+ element = jqLite("<div><div log></div></div>");
+ var linkFn = $compile(element);
+ element.append("<div></div>");
+ expect(function() {
+ linkFn($rootScope);
+ }).toThrow('Template changed structure!');
+ }
+ ));
+ });
+
+ describe('compiler control', function() {
+ describe('priority', function() {
+ it('should honor priority', inject(function($compile, $rootScope, log){
+ element = $compile(
+ '<span log="L" x-high-log="H" data-medium-log="M"></span>')
+ ($rootScope);
+ expect(log).toEqual('H; M; L');
+ }));
+ });
+
+
+ describe('terminal', function() {
+
+ it('should prevent further directives from running', inject(function($rootScope, $compile) {
+ element = $compile('<div negative-stop><a set="FAIL">OK</a></div>')($rootScope);
+ expect(element.text()).toEqual('OK');
+ }
+ ));
+
+
+ it('should prevent further directives from running, but finish current priority level',
+ inject(function($rootScope, $compile, log) {
+ // class is processed after attrs, so putting log in class will put it after
+ // the stop in the current level. This proves that the log runs after stop
+ element = $compile(
+ '<div high-log medium-stop log class="medium-log"><a set="FAIL">OK</a></div>')($rootScope);
+ expect(element.text()).toEqual('OK');
+ expect(log.toArray().sort()).toEqual(['HIGH', 'MEDIUM']);
+ })
+ );
+ });
+
+
+ describe('restrict', function() {
+
+ it('should allow restriction of attributes', function() {
+ module(function($compileProvider, $provide) {
+ forEach({div:'E', attr:'A', clazz:'C', all:'EAC'}, function(restrict, name) {
+ $compileProvider.directive(name, function(log) {
+ return {
+ restrict: restrict,
+ compile: valueFn(function(scope, element, attr) {
+ log(name);
+ })
+ };
+ });
+ });
+ });
+ inject(function($rootScope, $compile, log) {
+ dealoc($compile('<span div class="div"></span>')($rootScope));
+ expect(log).toEqual('');
+ log.reset();
+
+ dealoc($compile('<div></div>')($rootScope));
+ expect(log).toEqual('div');
+ log.reset();
+
+ dealoc($compile('<attr class=""attr"></attr>')($rootScope));
+ expect(log).toEqual('');
+ log.reset();
+
+ dealoc($compile('<span attr></span>')($rootScope));
+ expect(log).toEqual('attr');
+ log.reset();
+
+ dealoc($compile('<clazz clazz></clazz>')($rootScope));
+ expect(log).toEqual('');
+ log.reset();
+
+ dealoc($compile('<span class="clazz"></span>')($rootScope));
+ expect(log).toEqual('clazz');
+ log.reset();
+
+ dealoc($compile('<all class="all" all></all>')($rootScope));
+ expect(log).toEqual('all; all; all');
+ });
+ });
+ });
+
+
+ describe('template', function() {
+
+
+ beforeEach(module(function($compileProvider) {
+ $compileProvider.directive('replace', valueFn({
+ restrict: 'CAM',
+ replace: true,
+ template: '<div class="log" style="width: 10px" high-log>Hello: <<CONTENT>></div>',
+ compile: function(element, attr) {
+ attr.$set('compiled', 'COMPILED');
+ expect(element).toBe(attr.$element);
+ }
+ }));
+ $compileProvider.directive('append', valueFn({
+ restrict: 'CAM',
+ template: '<div class="log" style="width: 10px" high-log>Hello: <<CONTENT>></div>',
+ compile: function(element, attr) {
+ attr.$set('compiled', 'COMPILED');
+ expect(element).toBe(attr.$element);
+ }
+ }));
+ }));
+
+
+ it('should replace element with template', inject(function($compile, $rootScope) {
+ element = $compile('<div><div replace>content</div><div>')($rootScope);
+ expect(element.text()).toEqual('Hello: content');
+ expect(element.find('div').attr('compiled')).toEqual('COMPILED');
+ }));
+
+
+ it('should append element with template', inject(function($compile, $rootScope) {
+ element = $compile('<div><div append>content</div><div>')($rootScope);
+ expect(element.text()).toEqual('Hello: content');
+ expect(element.find('div').attr('compiled')).toEqual('COMPILED');
+ }));
+
+
+ it('should compile replace template', inject(function($compile, $rootScope, log) {
+ element = $compile('<div><div replace medium-log>{{ "angular" }}</div><div>')
+ ($rootScope);
+ $rootScope.$digest();
+ expect(element.text()).toEqual('Hello: angular');
+ // HIGH goes after MEDIUM since it executes as part of replaced template
+ expect(log).toEqual('MEDIUM; HIGH; LOG');
+ }));
+
+
+ it('should compile append template', inject(function($compile, $rootScope, log) {
+ element = $compile('<div><div append medium-log>{{ "angular" }}</div><div>')
+ ($rootScope);
+ $rootScope.$digest();
+ expect(element.text()).toEqual('Hello: angular');
+ expect(log).toEqual('HIGH; LOG; MEDIUM');
+ }));
+
+
+ it('should merge attributes including style attr', inject(function($compile, $rootScope) {
+ element = $compile(
+ '<div><div replace class="medium-log" style="height: 20px" ></div><div>')
+ ($rootScope);
+ var div = element.find('div');
+ expect(div.hasClass('medium-log')).toBe(true);
+ expect(div.hasClass('log')).toBe(true);
+ expect(div.css('width')).toBe('10px');
+ expect(div.css('height')).toBe('20px');
+ expect(div.attr('replace')).toEqual('');
+ expect(div.attr('high-log')).toEqual('');
+ }));
+
+ it('should prevent multiple templates per element', inject(function($compile) {
+ try {
+ $compile('<div><span replace class="replace"></span></div>')
+ fail();
+ } catch(e) {
+ expect(e.message).toMatch(/Multiple directives .* asking for template/);
+ }
+ }));
+
+ it('should play nice with repeater when inline', inject(function($compile, $rootScope) {
+ element = $compile(
+ '<div>' +
+ '<div ng-repeat="i in [1,2]" replace>{{i}}; </div>' +
+ '</div>')($rootScope);
+ $rootScope.$digest();
+ expect(element.text()).toEqual('Hello: 1; Hello: 2; ');
+ }));
+
+
+ it('should play nice with repeater when append', inject(function($compile, $rootScope) {
+ element = $compile(
+ '<div>' +
+ '<div ng-repeat="i in [1,2]" append>{{i}}; </div>' +
+ '</div>')($rootScope);
+ $rootScope.$digest();
+ expect(element.text()).toEqual('Hello: 1; Hello: 2; ');
+ }));
+
+
+ it('should merge interpolated css class', inject(function($compile, $rootScope) {
+ element = $compile('<div class="one {{cls}} three" replace></div>')($rootScope);
+
+ $rootScope.$apply(function() {
+ $rootScope.cls = 'two';
+ });
+
+ expect(element).toHaveClass('one');
+ expect(element).toHaveClass('two'); // interpolated
+ expect(element).toHaveClass('three');
+ expect(element).toHaveClass('log'); // merged from replace directive template
+ }));
+
+
+ it('should merge interpolated css class with ng-repeat',
+ inject(function($compile, $rootScope) {
+ element = $compile(
+ '<div>' +
+ '<div ng-repeat="i in [1]" class="one {{cls}} three" replace></div>' +
+ '</div>')($rootScope);
+
+ $rootScope.$apply(function() {
+ $rootScope.cls = 'two';
+ });
+
+ var child = element.find('div').eq(0);
+ expect(child).toHaveClass('one');
+ expect(child).toHaveClass('two'); // interpolated
+ expect(child).toHaveClass('three');
+ expect(child).toHaveClass('log'); // merged from replace directive template
+ }));
+ });
+
+
+ describe('async templates', function() {
+
+ beforeEach(module(
+ function($compileProvider) {
+ $compileProvider.directive('hello', valueFn({ restrict: 'CAM', templateUrl: 'hello.html' }));
+ $compileProvider.directive('cau', valueFn({ restrict: 'CAM', templateUrl:'cau.html' }));
+
+ $compileProvider.directive('cError', valueFn({
+ restrict: 'CAM',
+ templateUrl:'error.html',
+ compile: function() {
+ throw Error('cError');
+ }
+ }));
+ $compileProvider.directive('lError', valueFn({
+ restrict: 'CAM',
+ templateUrl: 'error.html',
+ compile: function() {
+ throw Error('lError');
+ }
+ }));
+
+
+ $compileProvider.directive('iHello', valueFn({
+ restrict: 'CAM',
+ replace: true,
+ templateUrl: 'hello.html'
+ }));
+ $compileProvider.directive('iCau', valueFn({
+ restrict: 'CAM',
+ replace: true,
+ templateUrl:'cau.html'
+ }));
+
+ $compileProvider.directive('iCError', valueFn({
+ restrict: 'CAM',
+ replace: true,
+ templateUrl:'error.html',
+ compile: function() {
+ throw Error('cError');
+ }
+ }));
+ $compileProvider.directive('iLError', valueFn({
+ restrict: 'CAM',
+ replace: true,
+ templateUrl: 'error.html',
+ compile: function() {
+ throw Error('lError');
+ }
+ }));
+
+ }
+ ));
+
+
+ it('should append template via $http and cache it in $templateCache', inject(
+ function($compile, $httpBackend, $templateCache, $rootScope, $browser) {
+ $httpBackend.expect('GET', 'hello.html').respond('<span>Hello!</span> World!');
+ $templateCache.put('cau.html', '<span>Cau!</span>');
+ element = $compile('<div><b class="hello">ignore</b><b class="cau">ignore</b></div>')($rootScope);
+ expect(sortedHtml(element)).
+ toEqual('<div><b class="hello"></b><b class="cau"></b></div>');
+
+ $rootScope.$digest();
+
+
+ expect(sortedHtml(element)).
+ toEqual('<div><b class="hello"></b><b class="cau"><span>Cau!</span></b></div>');
+
+ $httpBackend.flush();
+ expect(sortedHtml(element)).toEqual(
+ '<div>' +
+ '<b class="hello"><span>Hello!</span> World!</b>' +
+ '<b class="cau"><span>Cau!</span></b>' +
+ '</div>');
+ }
+ ));
+
+
+ it('should inline template via $http and cache it in $templateCache', inject(
+ function($compile, $httpBackend, $templateCache, $rootScope) {
+ $httpBackend.expect('GET', 'hello.html').respond('<span>Hello!</span>');
+ $templateCache.put('cau.html', '<span>Cau!</span>');
+ element = $compile('<div><b class=i-hello>ignore</b><b class=i-cau>ignore</b></div>')($rootScope);
+ expect(sortedHtml(element)).
+ toEqual('<div><b class="i-hello"></b><b class="i-cau"></b></div>');
+
+ $rootScope.$digest();
+
+
+ expect(sortedHtml(element)).
+ toEqual('<div><b class="i-hello"></b><span class="i-cau">Cau!</span></div>');
+
+ $httpBackend.flush();
+ expect(sortedHtml(element)).
+ toEqual('<div><span class="i-hello">Hello!</span><span class="i-cau">Cau!</span></div>');
+ }
+ ));
+
+
+ it('should compile, link and flush the template append', inject(
+ function($compile, $templateCache, $rootScope, $browser) {
+ $templateCache.put('hello.html', '<span>Hello, {{name}}!</span>');
+ $rootScope.name = 'Elvis';
+ element = $compile('<div><b class="hello"></b></div>')($rootScope);
+
+ $rootScope.$digest();
+
+ expect(sortedHtml(element)).
+ toEqual('<div><b class="hello"><span>Hello, Elvis!</span></b></div>');
+ }
+ ));
+
+
+ it('should compile, link and flush the template inline', inject(
+ function($compile, $templateCache, $rootScope) {
+ $templateCache.put('hello.html', '<span>Hello, {{name}}!</span>');
+ $rootScope.name = 'Elvis';
+ element = $compile('<div><b class=i-hello></b></div>')($rootScope);
+
+ $rootScope.$digest();
+
+ expect(sortedHtml(element)).
+ toEqual('<div><span class="i-hello">Hello, Elvis!</span></div>');
+ }
+ ));
+
+
+ it('should compile, flush and link the template append', inject(
+ function($compile, $templateCache, $rootScope) {
+ $templateCache.put('hello.html', '<span>Hello, {{name}}!</span>');
+ $rootScope.name = 'Elvis';
+ var template = $compile('<div><b class="hello"></b></div>');
+
+ element = template($rootScope);
+ $rootScope.$digest();
+
+ expect(sortedHtml(element)).
+ toEqual('<div><b class="hello"><span>Hello, Elvis!</span></b></div>');
+ }
+ ));
+
+
+ it('should compile, flush and link the template inline', inject(
+ function($compile, $templateCache, $rootScope) {
+ $templateCache.put('hello.html', '<span>Hello, {{name}}!</span>');
+ $rootScope.name = 'Elvis';
+ var template = $compile('<div><b class=i-hello></b></div>');
+
+ element = template($rootScope);
+ $rootScope.$digest();
+
+ expect(sortedHtml(element)).
+ toEqual('<div><span class="i-hello">Hello, Elvis!</span></div>');
+ }
+ ));
+
+
+ it('should resolve widgets after cloning in append mode', function() {
+ module(function($exceptionHandlerProvider) {
+ $exceptionHandlerProvider.mode('log');
+ });
+ inject(function($compile, $templateCache, $rootScope, $httpBackend, $browser,
+ $exceptionHandler) {
+ $httpBackend.expect('GET', 'hello.html').respond('<span>{{greeting}} </span>');
+ $httpBackend.expect('GET', 'error.html').respond('<div></div>');
+ $templateCache.put('cau.html', '<span>{{name}}</span>');
+ $rootScope.greeting = 'Hello';
+ $rootScope.name = 'Elvis';
+ var template = $compile(
+ '<div>' +
+ '<b class="hello"></b>' +
+ '<b class="cau"></b>' +
+ '<b class=c-error></b>' +
+ '<b class=l-error></b>' +
+ '</div>');
+ var e1;
+ var e2;
+
+ e1 = template($rootScope.$new(), noop); // clone
+ expect(e1.text()).toEqual('');
+
+ $httpBackend.flush();
+
+ e2 = template($rootScope.$new(), noop); // clone
+ $rootScope.$digest();
+ expect(e1.text()).toEqual('Hello Elvis');
+ expect(e2.text()).toEqual('Hello Elvis');
+
+ expect($exceptionHandler.errors.length).toEqual(2);
+ expect($exceptionHandler.errors[0][0].message).toEqual('cError');
+ expect($exceptionHandler.errors[1][0].message).toEqual('lError');
+
+ dealoc(e1);
+ dealoc(e2);
+ });
+ });
+
+
+ it('should resolve widgets after cloning in inline mode', function() {
+ module(function($exceptionHandlerProvider) {
+ $exceptionHandlerProvider.mode('log');
+ });
+ inject(function($compile, $templateCache, $rootScope, $httpBackend, $browser,
+ $exceptionHandler) {
+ $httpBackend.expect('GET', 'hello.html').respond('<span>{{greeting}} </span>');
+ $httpBackend.expect('GET', 'error.html').respond('<div></div>');
+ $templateCache.put('cau.html', '<span>{{name}}</span>');
+ $rootScope.greeting = 'Hello';
+ $rootScope.name = 'Elvis';
+ var template = $compile(
+ '<div>' +
+ '<b class=i-hello></b>' +
+ '<b class=i-cau></b>' +
+ '<b class=i-c-error></b>' +
+ '<b class=i-l-error></b>' +
+ '</div>');
+ var e1;
+ var e2;
+
+ e1 = template($rootScope.$new(), noop); // clone
+ expect(e1.text()).toEqual('');
+
+ $httpBackend.flush();
+
+ e2 = template($rootScope.$new(), noop); // clone
+ $rootScope.$digest();
+ expect(e1.text()).toEqual('Hello Elvis');
+ expect(e2.text()).toEqual('Hello Elvis');
+
+ expect($exceptionHandler.errors.length).toEqual(2);
+ expect($exceptionHandler.errors[0][0].message).toEqual('cError');
+ expect($exceptionHandler.errors[1][0].message).toEqual('lError');
+
+ dealoc(e1);
+ dealoc(e2);
+ });
+ });
+
+
+ it('should be implicitly terminal and not compile placeholder content in append', inject(
+ function($compile, $templateCache, $rootScope, log) {
+ // we can't compile the contents because that would result in a memory leak
+
+ $templateCache.put('hello.html', 'Hello!');
+ element = $compile('<div><b class="hello"><div log></div></b></div>')($rootScope);
+
+ expect(log).toEqual('');
+ }
+ ));
+
+
+ it('should be implicitly terminal and not compile placeholder content in inline', inject(
+ function($compile, $templateCache, $rootScope, log) {
+ // we can't compile the contents because that would result in a memory leak
+
+ $templateCache.put('hello.html', 'Hello!');
+ element = $compile('<div><b class=i-hello><div log></div></b></div>')($rootScope);
+
+ expect(log).toEqual('');
+ }
+ ));
+
+
+ it('should throw an error and clear element content if the template fails to load', inject(
+ function($compile, $httpBackend, $rootScope) {
+ $httpBackend.expect('GET', 'hello.html').respond(404, 'Not Found!');
+ element = $compile('<div><b class="hello">content</b></div>')($rootScope);
+
+ expect(function() {
+ $httpBackend.flush();
+ }).toThrow('Failed to load template: hello.html');
+ expect(sortedHtml(element)).toBe('<div><b class="hello"></b></div>');
+ }
+ ));
+
+
+ it('should prevent multiple templates per element', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive('sync', valueFn({
+ restrict: 'C',
+ template: '<span></span>'
+ }));
+ $compileProvider.directive('async', valueFn({
+ restrict: 'C',
+ templateUrl: 'template.html'
+ }));
+ });
+ inject(function($compile){
+ expect(function() {
+ $compile('<div><div class="sync async"></div></div>');
+ }).toThrow('Multiple directives [sync, async] asking for template on: <'+
+ (msie <= 8 ? 'DIV' : 'div') + ' class="sync async">');
+ });
+ });
+
+
+ describe('delay compile / linking functions until after template is resolved', function(){
+ var template;
+ beforeEach(module(function($compileProvider) {
+ function directive (name, priority, options) {
+ $compileProvider.directive(name, function(log) {
+ return (extend({
+ priority: priority,
+ compile: function() {
+ log(name + '-C');
+ return function() { log(name + '-L'); }
+ }
+ }, options || {}));
+ });
+ }
+
+ directive('first', 10);
+ directive('second', 5, { templateUrl: 'second.html' });
+ directive('third', 3);
+ directive('last', 0);
+
+ directive('iFirst', 10, {replace: true});
+ directive('iSecond', 5, {replace: true, templateUrl: 'second.html' });
+ directive('iThird', 3, {replace: true});
+ directive('iLast', 0, {replace: true});
+ }));
+
+ it('should flush after link append', inject(
+ function($compile, $rootScope, $httpBackend, log) {
+ $httpBackend.expect('GET', 'second.html').respond('<div third>{{1+2}}</div>');
+ template = $compile('<div><span first second last></span></div>');
+ element = template($rootScope);
+ expect(log).toEqual('first-C');
+
+ log('FLUSH');
+ $httpBackend.flush();
+ $rootScope.$digest();
+ expect(log).toEqual(
+ 'first-C; FLUSH; second-C; last-C; third-C; ' +
+ 'third-L; first-L; second-L; last-L');
+
+ var span = element.find('span');
+ expect(span.attr('first')).toEqual('');
+ expect(span.attr('second')).toEqual('');
+ expect(span.find('div').attr('third')).toEqual('');
+ expect(span.attr('last')).toEqual('');
+
+ expect(span.text()).toEqual('3');
+ }));
+
+
+ it('should flush after link inline', inject(
+ function($compile, $rootScope, $httpBackend, log) {
+ $httpBackend.expect('GET', 'second.html').respond('<div i-third>{{1+2}}</div>');
+ template = $compile('<div><span i-first i-second i-last></span></div>');
+ element = template($rootScope);
+ expect(log).toEqual('iFirst-C');
+
+ log('FLUSH');
+ $httpBackend.flush();
+ $rootScope.$digest();
+ expect(log).toEqual(
+ 'iFirst-C; FLUSH; iSecond-C; iThird-C; iLast-C; ' +
+ 'iFirst-L; iSecond-L; iThird-L; iLast-L');
+
+ var div = element.find('div');
+ expect(div.attr('i-first')).toEqual('');
+ expect(div.attr('i-second')).toEqual('');
+ expect(div.attr('i-third')).toEqual('');
+ expect(div.attr('i-last')).toEqual('');
+
+ expect(div.text()).toEqual('3');
+ }));
+
+
+ it('should flush before link append', inject(
+ function($compile, $rootScope, $httpBackend, log) {
+ $httpBackend.expect('GET', 'second.html').respond('<div third>{{1+2}}</div>');
+ template = $compile('<div><span first second last></span></div>');
+ expect(log).toEqual('first-C');
+ log('FLUSH');
+ $httpBackend.flush();
+ expect(log).toEqual('first-C; FLUSH; second-C; last-C; third-C');
+
+ element = template($rootScope);
+ $rootScope.$digest();
+ expect(log).toEqual(
+ 'first-C; FLUSH; second-C; last-C; third-C; ' +
+ 'third-L; first-L; second-L; last-L');
+
+ var span = element.find('span');
+ expect(span.attr('first')).toEqual('');
+ expect(span.attr('second')).toEqual('');
+ expect(span.find('div').attr('third')).toEqual('');
+ expect(span.attr('last')).toEqual('');
+
+ expect(span.text()).toEqual('3');
+ }));
+
+
+ it('should flush before link inline', inject(
+ function($compile, $rootScope, $httpBackend, log) {
+ $httpBackend.expect('GET', 'second.html').respond('<div i-third>{{1+2}}</div>');
+ template = $compile('<div><span i-first i-second i-last></span></div>');
+ expect(log).toEqual('iFirst-C');
+ log('FLUSH');
+ $httpBackend.flush();
+ expect(log).toEqual('iFirst-C; FLUSH; iSecond-C; iThird-C; iLast-C');
+
+ element = template($rootScope);
+ $rootScope.$digest();
+ expect(log).toEqual(
+ 'iFirst-C; FLUSH; iSecond-C; iThird-C; iLast-C; ' +
+ 'iFirst-L; iSecond-L; iThird-L; iLast-L');
+
+ var div = element.find('div');
+ expect(div.attr('i-first')).toEqual('');
+ expect(div.attr('i-second')).toEqual('');
+ expect(div.attr('i-third')).toEqual('');
+ expect(div.attr('i-last')).toEqual('');
+
+ expect(div.text()).toEqual('3');
+ }));
+ });
+
+
+ it('should check that template has root element', inject(function($compile, $httpBackend) {
+ $httpBackend.expect('GET', 'hello.html').respond('before <b>mid</b> after');
+ $compile('<div i-hello></div>');
+ expect(function(){
+ $httpBackend.flush();
+ }).toThrow('Template must have exactly one root element: before <b>mid</b> after');
+ }));
+
+
+ it('should allow multiple elements in template', inject(function($compile, $httpBackend) {
+ $httpBackend.expect('GET', 'hello.html').respond('before <b>mid</b> after');
+ element = jqLite('<div hello></div>');
+ $compile(element);
+ $httpBackend.flush();
+ expect(element.text()).toEqual('before mid after');
+ }));
+
+
+ it('should work when widget is in root element', inject(
+ function($compile, $httpBackend, $rootScope) {
+ $httpBackend.expect('GET', 'hello.html').respond('<span>3==<<content>></span>');
+ element = jqLite('<b class="hello">{{1+2}}</b>');
+ $compile(element)($rootScope);
+
+ $httpBackend.flush();
+ expect(element.text()).toEqual('3==3');
+ }
+ ));
+
+
+ it('should work when widget is a repeater', inject(
+ function($compile, $httpBackend, $rootScope) {
+ $httpBackend.expect('GET', 'hello.html').respond('<span>i=<<content>>;</span>');
+ element = jqLite('<div><b class=hello ng-repeat="i in [1,2]">{{i}}</b></div>');
+ $compile(element)($rootScope);
+
+ $httpBackend.flush();
+ expect(element.text()).toEqual('i=1;i=2;');
+ }
+ ));
+ });
+
+
+ describe('scope', function() {
+ var iscope;
+
+ beforeEach(module(function($compileProvider) {
+ forEach(['', 'a', 'b'], function(name) {
+ $compileProvider.directive('scope' + uppercase(name), function(log) {
+ return {
+ scope: true,
+ restrict: 'CA',
+ compile: function() {
+ return function (scope, element) {
+ log(scope.$id);
+ expect(element.data('$scope')).toBe(scope);
+ };
+ }
+ };
+ });
+ $compileProvider.directive('iscope' + uppercase(name), function(log) {
+ return {
+ scope: {},
+ restrict: 'CA',
+ compile: function() {
+ return function (scope, element) {
+ iscope = scope;
+ log(scope.$id);
+ expect(element.data('$scope')).toBe(scope);
+ };
+ }
+ };
+ });
+ $compileProvider.directive('tiscope' + uppercase(name), function(log) {
+ return {
+ scope: {},
+ restrict: 'CA',
+ templateUrl: 'tiscope.html',
+ compile: function() {
+ return function (scope, element) {
+ iscope = scope;
+ log(scope.$id);
+ expect(element.data('$scope')).toBe(scope);
+ };
+ }
+ };
+ });
+ });
+ $compileProvider.directive('log', function(log) {
+ return {
+ restrict: 'CA',
+ link: function(scope) {
+ log('log-' + scope.$id + '-' + scope.$parent.$id);
+ }
+ };
+ });
+ }));
+
+
+ it('should allow creation of new scopes', inject(function($rootScope, $compile, log) {
+ element = $compile('<div><span scope><a log></a></span></div>')($rootScope);
+ expect(log).toEqual('LOG; log-002-001; 002');
+ expect(element.find('span').hasClass('ng-scope')).toBe(true);
+ }));
+
+
+ it('should allow creation of new isolated scopes for directives', inject(
+ function($rootScope, $compile, log) {
+ element = $compile('<div><span iscope><a log></a></span></div>')($rootScope);
+ expect(log).toEqual('LOG; log-002-001; 002');
+ $rootScope.name = 'abc';
+ expect(iscope.$parent).toBe($rootScope);
+ expect(iscope.name).toBeUndefined();
+ }));
+
+
+ it('should allow creation of new isolated scopes for directives with templates', inject(
+ function($rootScope, $compile, log, $httpBackend) {
+ $httpBackend.expect('GET', 'tiscope.html').respond('<a log></a>');
+ element = $compile('<div><span tiscope></span></div>')($rootScope);
+ $httpBackend.flush();
+ expect(log).toEqual('LOG; log-002-001; 002');
+ $rootScope.name = 'abc';
+ expect(iscope.$parent).toBe($rootScope);
+ expect(iscope.name).toBeUndefined();
+ }));
+
+
+ it('should correctly create the scope hierachy', inject(
+ function($rootScope, $compile, log) {
+ element = $compile(
+ '<div>' + //1
+ '<b class=scope>' + //2
+ '<b class=scope><b class=log></b></b>' + //3
+ '<b class=log></b>' +
+ '</b>' +
+ '<b class=scope>' + //4
+ '<b class=log></b>' +
+ '</b>' +
+ '</div>'
+ )($rootScope);
+ expect(log).toEqual('LOG; log-003-002; 003; LOG; log-002-001; 002; LOG; log-004-001; 004');
+ })
+ );
+
+
+ it('should allow more one new scope directives per element, but directives should share' +
+ 'the scope', inject(
+ function($rootScope, $compile, log) {
+ element = $compile('<div class="scope-a; scope-b"></div>')($rootScope);
+ expect(log).toEqual('002; 002');
+ })
+ );
+
+ it('should not allow more then one isolate scope creation per element', inject(
+ function($rootScope, $compile) {
+ expect(function(){
+ $compile('<div class="iscope-a; scope-b"></div>');
+ }).toThrow('Multiple directives [iscopeA, scopeB] asking for isolated scope on: ' +
+ '<' + (msie < 9 ? 'DIV' : 'div') +
+ ' class="iscope-a; scope-b ng-isolate-scope ng-scope">');
+ })
+ );
+
+
+ it('should not allow more then one isolate scope creation per element', inject(
+ function($rootScope, $compile) {
+ expect(function(){
+ $compile('<div class="iscope-a; iscope-b"></div>');
+ }).toThrow('Multiple directives [iscopeA, iscopeB] asking for isolated scope on: ' +
+ '<' + (msie < 9 ? 'DIV' : 'div') +
+ ' class="iscope-a; iscope-b ng-isolate-scope ng-scope">');
+ })
+ );
+
+
+ it('should create new scope even at the root of the template', inject(
+ function($rootScope, $compile, log) {
+ element = $compile('<div scope-a></div>')($rootScope);
+ expect(log).toEqual('002');
+ })
+ );
+
+
+ it('should create isolate scope even at the root of the template', inject(
+ function($rootScope, $compile, log) {
+ element = $compile('<div iscope></div>')($rootScope);
+ expect(log).toEqual('002');
+ })
+ );
+ });
+ });
+ });
+
+
+ describe('interpolation', function() {
+ var observeSpy, attrValueDuringLinking;
+
+ beforeEach(module(function($compileProvider) {
+ $compileProvider.directive('observer', function() {
+ return function(scope, elm, attr) {
+ observeSpy = jasmine.createSpy('$observe attr');
+
+ attr.$observe('someAttr', observeSpy);
+ attrValueDuringLinking = attr.someAttr;
+ };
+ });
+ }));
+
+
+ it('should compile and link both attribute and text bindings', inject(
+ function($rootScope, $compile) {
+ $rootScope.name = 'angular';
+ element = $compile('<div name="attr: {{name}}">text: {{name}}</div>')($rootScope);
+ $rootScope.$digest();
+ expect(element.text()).toEqual('text: angular');
+ expect(element.attr('name')).toEqual('attr: angular');
+ }));
+
+
+ it('should decorate the binding with ng-binding and interpolation function', inject(
+ function($compile, $rootScope) {
+ element = $compile('<div>{{1+2}}</div>')($rootScope);
+ expect(element.hasClass('ng-binding')).toBe(true);
+ expect(element.data('$binding')[0].exp).toEqual('{{1+2}}');
+ }));
+
+
+ it('should observe interpolated attrs', inject(function($rootScope, $compile) {
+ $compile('<div some-attr="{{value}}" observer></div>')($rootScope);
+
+ // should be async
+ expect(observeSpy).not.toHaveBeenCalled();
+
+ $rootScope.$apply(function() {
+ $rootScope.value = 'bound-value';
+ });
+ expect(observeSpy).toHaveBeenCalledOnceWith('bound-value');
+ }));
+
+
+ it('should set interpolated attrs to undefined', inject(function($rootScope, $compile) {
+ attrValueDuringLinking = null;
+ $compile('<div some-attr="{{whatever}}" observer></div>')($rootScope);
+ expect(attrValueDuringLinking).toBeUndefined();
+ }));
+
+
+ it('should not call observer of non-interpolated attr', inject(function($rootScope, $compile) {
+ $compile('<div some-attr="nonBound" observer></div>')($rootScope);
+ expect(attrValueDuringLinking).toBe('nonBound');
+
+ $rootScope.$digest();
+ expect(observeSpy).not.toHaveBeenCalled();
+ }));
+
+
+ it('should delegate exceptions to $exceptionHandler', function() {
+ observeSpy = jasmine.createSpy('$observe attr').andThrow('ERROR');
+
+ module(function($compileProvider, $exceptionHandlerProvider) {
+ $exceptionHandlerProvider.mode('log');
+ $compileProvider.directive('error', function() {
+ return function(scope, elm, attr) {
+ attr.$observe('someAttr', observeSpy);
+ attr.$observe('someAttr', observeSpy);
+ };
+ });
+ });
+
+ inject(function($compile, $rootScope, $exceptionHandler) {
+ $compile('<div some-attr="{{value}}" error></div>')($rootScope);
+ $rootScope.$digest();
+
+ expect(observeSpy).toHaveBeenCalled();
+ expect(observeSpy.callCount).toBe(2);
+ expect($exceptionHandler.errors).toEqual(['ERROR', 'ERROR']);
+ });
+ });
+
+
+ it('should translate {{}} in terminal nodes', inject(function($rootScope, $compile) {
+ element = $compile('<select ng:model="x"><option value="">Greet {{name}}!</option></select>')($rootScope)
+ $rootScope.$digest();
+ expect(sortedHtml(element).replace(' selected="true"', '')).
+ toEqual('<select ng:model="x">' +
+ '<option>Greet !</option>' +
+ '</select>');
+ $rootScope.name = 'Misko';
+ $rootScope.$digest();
+ expect(sortedHtml(element).replace(' selected="true"', '')).
+ toEqual('<select ng:model="x">' +
+ '<option>Greet Misko!</option>' +
+ '</select>');
+ }));
+ });
+
+
+ describe('link phase', function() {
+
+ beforeEach(module(function($compileProvider) {
+
+ forEach(['a', 'b', 'c'], function(name) {
+ $compileProvider.directive(name, function(log) {
+ return {
+ restrict: 'ECA',
+ compile: function() {
+ log('t' + uppercase(name))
+ return {
+ pre: function() {
+ log('pre' + uppercase(name));
+ },
+ post: function linkFn() {
+ log('post' + uppercase(name));
+ }
+ };
+ }
+ };
+ });
+ });
+ }));
+
+
+ it('should not store linkingFns for noop branches', inject(function ($rootScope, $compile) {
+ element = jqLite('<div name="{{a}}"><span>ignore</span></div>');
+ var linkingFn = $compile(element);
+ // Now prune the branches with no directives
+ element.find('span').remove();
+ expect(element.find('span').length).toBe(0);
+ // and we should still be able to compile without errors
+ linkingFn($rootScope);
+ }));
+
+
+ it('should compile from top to bottom but link from bottom up', inject(
+ function($compile, $rootScope, log) {
+ element = $compile('<a b><c></c></a>')($rootScope);
+ expect(log).toEqual('tA; tB; tC; preA; preB; preC; postC; postA; postB');
+ }
+ ));
+
+
+ it('should support link function on directive object', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive('abc', valueFn({
+ link: function(scope, element, attrs) {
+ element.text(attrs.abc);
+ }
+ }));
+ });
+ inject(function($compile, $rootScope) {
+ element = $compile('<div abc="WORKS">FAIL</div>')($rootScope);
+ expect(element.text()).toEqual('WORKS');
+ });
+ });
+ });
+
+
+ describe('attrs', function() {
+
+ it('should allow setting of attributes', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive({
+ setter: valueFn(function(scope, element, attr) {
+ attr.$set('name', 'abc');
+ attr.$set('disabled', true);
+ expect(attr.name).toBe('abc');
+ expect(attr.disabled).toBe(true);
+ })
+ });
+ });
+ inject(function($rootScope, $compile) {
+ element = $compile('<div setter></div>')($rootScope);
+ expect(element.attr('name')).toEqual('abc');
+ expect(element.attr('disabled')).toEqual('disabled');
+ });
+ });
+
+
+ it('should read boolean attributes as boolean only on control elements', function() {
+ var value;
+ module(function($compileProvider) {
+ $compileProvider.directive({
+ input: valueFn({
+ restrict: 'ECA',
+ link:function(scope, element, attr) {
+ value = attr.required;
+ }
+ })
+ });
+ });
+ inject(function($rootScope, $compile) {
+ element = $compile('<input required></input>')($rootScope);
+ expect(value).toEqual(true);
+ });
+ });
+
+ it('should read boolean attributes as text on non-controll elements', function() {
+ var value;
+ module(function($compileProvider) {
+ $compileProvider.directive({
+ div: valueFn({
+ restrict: 'ECA',
+ link:function(scope, element, attr) {
+ value = attr.required;
+ }
+ })
+ });
+ });
+ inject(function($rootScope, $compile) {
+ element = $compile('<div required="some text"></div>')($rootScope);
+ expect(value).toEqual('some text');
+ });
+ });
+
+ it('should allow setting of attributes', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive({
+ setter: valueFn(function(scope, element, attr) {
+ attr.$set('name', 'abc');
+ attr.$set('disabled', true);
+ expect(attr.name).toBe('abc');
+ expect(attr.disabled).toBe(true);
+ })
+ });
+ });
+ inject(function($rootScope, $compile) {
+ element = $compile('<div setter></div>')($rootScope);
+ expect(element.attr('name')).toEqual('abc');
+ expect(element.attr('disabled')).toEqual('disabled');
+ });
+ });
+
+
+ it('should create new instance of attr for each template stamping', function() {
+ module(function($compileProvider, $provide) {
+ var state = { first: [], second: [] };
+ $provide.value('state', state);
+ $compileProvider.directive({
+ first: valueFn({
+ priority: 1,
+ compile: function(templateElement, templateAttr) {
+ return function(scope, element, attr) {
+ state.first.push({
+ template: {element: templateElement, attr:templateAttr},
+ link: {element: element, attr: attr}
+ });
+ }
+ }
+ }),
+ second: valueFn({
+ priority: 2,
+ compile: function(templateElement, templateAttr) {
+ return function(scope, element, attr) {
+ state.second.push({
+ template: {element: templateElement, attr:templateAttr},
+ link: {element: element, attr: attr}
+ });
+ }
+ }
+ })
+ });
+ });
+ inject(function($rootScope, $compile, state) {
+ var template = $compile('<div first second>');
+ dealoc(template($rootScope.$new(), noop));
+ dealoc(template($rootScope.$new(), noop));
+
+ // instance between directives should be shared
+ expect(state.first[0].template.element).toBe(state.second[0].template.element);
+ expect(state.first[0].template.attr).toBe(state.second[0].template.attr);
+
+ // the template and the link can not be the same instance
+ expect(state.first[0].template.element).not.toBe(state.first[0].link.element);
+ expect(state.first[0].template.attr).not.toBe(state.first[0].link.attr);
+
+ // each new template needs to be new instance
+ expect(state.first[0].link.element).not.toBe(state.first[1].link.element);
+ expect(state.first[0].link.attr).not.toBe(state.first[1].link.attr);
+ expect(state.second[0].link.element).not.toBe(state.second[1].link.element);
+ expect(state.second[0].link.attr).not.toBe(state.second[1].link.attr);
+ });
+ });
+
+
+ describe('$set', function() {
+ var attr;
+ beforeEach(function(){
+ module(function($compileProvider) {
+ $compileProvider.directive('input', valueFn({
+ restrict: 'ECA',
+ link: function(scope, element, attr) {
+ scope.attr = attr;
+ }
+ }));
+ });
+ inject(function($compile, $rootScope) {
+ element = $compile('<input></input>')($rootScope);
+ attr = $rootScope.attr;
+ expect(attr).toBeDefined();
+ });
+ });
+
+
+ it('should set attributes', function() {
+ attr.$set('ngMyAttr', 'value');
+ expect(element.attr('ng-my-attr')).toEqual('value');
+ expect(attr.ngMyAttr).toEqual('value');
+ });
+
+
+ it('should allow overriding of attribute name and remember the name', function() {
+ attr.$set('ngOther', '123', true, 'other');
+ expect(element.attr('other')).toEqual('123');
+ expect(attr.ngOther).toEqual('123');
+
+ attr.$set('ngOther', '246');
+ expect(element.attr('other')).toEqual('246');
+ expect(attr.ngOther).toEqual('246');
+ });
+
+
+ it('should remove attribute', function() {
+ attr.$set('ngMyAttr', 'value');
+ expect(element.attr('ng-my-attr')).toEqual('value');
+
+ attr.$set('ngMyAttr', undefined);
+ expect(element.attr('ng-my-attr')).toBe(undefined);
+
+ attr.$set('ngMyAttr', 'value');
+ attr.$set('ngMyAttr', null);
+ expect(element.attr('ng-my-attr')).toBe(undefined);
+ });
+
+
+ it('should not set DOM element attr if writeAttr false', function() {
+ attr.$set('test', 'value', false);
+
+ expect(element.attr('test')).toBeUndefined();
+ expect(attr.test).toBe('value');
+ });
+ });
+ });
+
+
+ describe('locals', function() {
+ it('should marshal to locals', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive('widget', function(log) {
+ return {
+ scope: {
+ attr: 'attribute',
+ prop: 'evaluate',
+ bind: 'bind',
+ assign: 'accessor',
+ read: 'accessor',
+ exp: 'expression',
+ nonExist: 'accessor',
+ nonExistExpr: 'expression'
+ },
+ link: function(scope, element, attrs) {
+ scope.nonExist(); // noop
+ scope.nonExist(123); // noop
+ scope.nonExistExpr(); // noop
+ scope.nonExistExpr(123); // noop
+ log(scope.attr);
+ log(scope.prop);
+ log(scope.assign());
+ log(scope.read());
+ log(scope.assign('ng'));
+ scope.exp({myState:'OK'});
+ expect(function() { scope.read(undefined); }).
+ toThrow("Expression ''D'' not assignable.");
+ scope.$watch('bind', log);
+ }
+ };
+ });
+ });
+ inject(function(log, $compile, $rootScope) {
+ $rootScope.myProp = 'B';
+ $rootScope.bi = {nd: 'C'};
+ $rootScope.name = 'C';
+ element = $compile(
+ '<div><div widget attr="A" prop="myProp" bind="{{bi.nd}}" assign="name" read="\'D\'" ' +
+ 'exp="state=myState">{{bind}}</div></div>')
+ ($rootScope);
+ expect(log).toEqual('A; B; C; D; ng');
+ expect($rootScope.name).toEqual('ng');
+ expect($rootScope.state).toEqual('OK');
+ log.reset();
+ $rootScope.$apply();
+ expect(element.text()).toEqual('C');
+ expect(log).toEqual('C');
+ $rootScope.bi.nd = 'c';
+ $rootScope.$apply();
+ expect(log).toEqual('C; c');
+ });
+ });
+ });
+
+
+ describe('controller', function() {
+ it('should inject locals to controller', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive('widget', function(log) {
+ return {
+ controller: function(attr, prop, assign, read, exp){
+ log(attr);
+ log(prop);
+ log(assign());
+ log(read());
+ log(assign('ng'));
+ exp();
+ expect(function() { read(undefined); }).
+ toThrow("Expression ''D'' not assignable.");
+ this.result = 'OK';
+ },
+ inject: {
+ attr: 'attribute',
+ prop: 'evaluate',
+ assign: 'accessor',
+ read: 'accessor',
+ exp: 'expression'
+ },
+ link: function(scope, element, attrs, controller) {
+ log(controller.result);
+ }
+ };
+ });
+ });
+ inject(function(log, $compile, $rootScope) {
+ $rootScope.myProp = 'B';
+ $rootScope.bi = {nd: 'C'};
+ $rootScope.name = 'C';
+ element = $compile(
+ '<div><div widget attr="A" prop="myProp" bind="{{bi.nd}}" assign="name" read="\'D\'" ' +
+ 'exp="state=\'OK\'">{{bind}}</div></div>')
+ ($rootScope);
+ expect(log).toEqual('A; B; C; D; ng; OK');
+ expect($rootScope.name).toEqual('ng');
+ });
+ });
+
+
+ it('should get required controller', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive('main', function(log) {
+ return {
+ priority: 2,
+ controller: function() {
+ this.name = 'main';
+ },
+ link: function(scope, element, attrs, controller) {
+ log(controller.name);
+ }
+ };
+ });
+ $compileProvider.directive('dep', function(log) {
+ return {
+ priority: 1,
+ require: 'main',
+ link: function(scope, element, attrs, controller) {
+ log('dep:' + controller.name);
+ }
+ };
+ });
+ $compileProvider.directive('other', function(log) {
+ return {
+ link: function(scope, element, attrs, controller) {
+ log(!!controller); // should be false
+ }
+ };
+ });
+ });
+ inject(function(log, $compile, $rootScope) {
+ element = $compile('<div main dep other></div>')($rootScope);
+ expect(log).toEqual('main; dep:main; false');
+ });
+ });
+
+
+ it('should require controller on parent element',function() {
+ module(function($compileProvider) {
+ $compileProvider.directive('main', function(log) {
+ return {
+ controller: function() {
+ this.name = 'main';
+ }
+ };
+ });
+ $compileProvider.directive('dep', function(log) {
+ return {
+ require: '^main',
+ link: function(scope, element, attrs, controller) {
+ log('dep:' + controller.name);
+ }
+ };
+ });
+ });
+ inject(function(log, $compile, $rootScope) {
+ element = $compile('<div main><div dep></div></div>')($rootScope);
+ expect(log).toEqual('dep:main');
+ });
+ });
+
+
+ it('should have optional controller on current element', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive('dep', function(log) {
+ return {
+ require: '?main',
+ link: function(scope, element, attrs, controller) {
+ log('dep:' + !!controller);
+ }
+ };
+ });
+ });
+ inject(function(log, $compile, $rootScope) {
+ element = $compile('<div main><div dep></div></div>')($rootScope);
+ expect(log).toEqual('dep:false');
+ });
+ });
+
+
+ it('should support multiple controllers', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive('c1', valueFn({
+ controller: function() { this.name = 'c1'; }
+ }));
+ $compileProvider.directive('c2', valueFn({
+ controller: function() { this.name = 'c2'; }
+ }));
+ $compileProvider.directive('dep', function(log) {
+ return {
+ require: ['^c1', '^c2'],
+ link: function(scope, element, attrs, controller) {
+ log('dep:' + controller[0].name + '-' + controller[1].name);
+ }
+ };
+ });
+ });
+ inject(function(log, $compile, $rootScope) {
+ element = $compile('<div c1 c2><div dep></div></div>')($rootScope);
+ expect(log).toEqual('dep:c1-c2');
+ });
+
+ });
+ });
+
+
+ describe('transclude', function() {
+ it('should compile get templateFn', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive('trans', function(log) {
+ return {
+ transclude: 'element',
+ priority: 2,
+ controller: function($transclude) { this.$transclude = $transclude; },
+ compile: function(element, attrs, template) {
+ log('compile: ' + angular.mock.dump(element));
+ return function(scope, element, attrs, ctrl) {
+ log('link');
+ var cursor = element;
+ template(scope.$new(), function(clone) {cursor.after(cursor = clone)});
+ ctrl.$transclude(function(clone) {cursor.after(clone)});
+ };
+ }
+ }
+ });
+ });
+ inject(function(log, $rootScope, $compile) {
+ element = $compile('<div><div high-log trans="text" log>{{$parent.$id}}-{{$id}};</div></div>')
+ ($rootScope);
+ $rootScope.$apply();
+ expect(log).toEqual('compile: <!-- trans: text -->; HIGH; link; LOG; LOG');
+ expect(element.text()).toEqual('001-002;001-003;');
+ });
+ });
+
+
+ it('should support transclude directive', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive('trans', function() {
+ return {
+ transclude: 'content',
+ replace: true,
+ scope: true,
+ template: '<ul><li>W:{{$parent.$id}}-{{$id}};</li><li ng-transclude></li></ul>'
+ }
+ });
+ });
+ inject(function(log, $rootScope, $compile) {
+ element = $compile('<div><div trans>T:{{$parent.$id}}-{{$id}}<span>;</span></div></div>')
+ ($rootScope);
+ $rootScope.$apply();
+ expect(element.text()).toEqual('W:001-002;T:001-003;');
+ expect(jqLite(element.find('span')[0]).text()).toEqual('T:001-003');
+ expect(jqLite(element.find('span')[1]).text()).toEqual(';');
+ });
+ });
+
+
+ it('should transclude transcluded content', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive('book', valueFn({
+ transclude: 'content',
+ template: '<div>book-<div chapter>(<div ng-transclude></div>)</div></div>'
+ }));
+ $compileProvider.directive('chapter', valueFn({
+ transclude: 'content',
+ templateUrl: 'chapter.html'
+ }));
+ $compileProvider.directive('section', valueFn({
+ transclude: 'content',
+ template: '<div>section-!<div ng-transclude></div>!</div></div>'
+ }));
+ return function($httpBackend) {
+ $httpBackend.
+ expect('GET', 'chapter.html').
+ respond('<div>chapter-<div section>[<div ng-transclude></div>]</div></div>');
+ }
+ });
+ inject(function(log, $rootScope, $compile, $httpBackend) {
+ element = $compile('<div><div book>paragraph</div></div>')($rootScope);
+ $rootScope.$apply();
+
+ expect(element.text()).toEqual('book-');
+
+ $httpBackend.flush();
+ $rootScope.$apply();
+ expect(element.text()).toEqual('book-chapter-section-![(paragraph)]!');
+ });
+ });
+
+
+ it('should only allow one transclude per element', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive('first', valueFn({
+ scope: {},
+ restrict: 'CA',
+ transclude: 'content'
+ }));
+ $compileProvider.directive('second', valueFn({
+ restrict: 'CA',
+ transclude: 'content'
+ }));
+ });
+ inject(function($compile) {
+ expect(function() {
+ $compile('<div class="first second"></div>');
+ }).toThrow('Multiple directives [first, second] asking for transclusion on: <' +
+ (msie <= 8 ? 'DIV' : 'div') + ' class="first second ng-isolate-scope ng-scope">');
+ });
+ });
+
+
+ it('should remove transclusion scope, when the DOM is destroyed', function() {
+ module(function($compileProvider) {
+ $compileProvider.directive('box', valueFn({
+ transclude: 'content',
+ scope: { name: 'evaluate', show: 'accessor' },
+ template: '<div><h1>Hello: {{name}}!</h1><div ng-transclude></div></div>',
+ link: function(scope, element) {
+ scope.$watch(
+ function() { return scope.show(); },
+ function(show) {
+ if (!show) {
+ element.find('div').find('div').remove();
+ }
+ }
+ );
+ }
+ }));
+ });
+ inject(function($compile, $rootScope) {
+ $rootScope.username = 'Misko';
+ $rootScope.select = true;
+ element = $compile(
+ '<div><div box name="username" show="select">user: {{username}}</div></div>')
+ ($rootScope);
+ $rootScope.$apply();
+ expect(element.text()).toEqual('Hello: Misko!user: Misko');
+
+ var widgetScope = $rootScope.$$childHead;
+ var transcludeScope = widgetScope.$$nextSibling;
+ expect(widgetScope.name).toEqual('Misko');
+ expect(widgetScope.$parent).toEqual($rootScope);
+ expect(transcludeScope.$parent).toEqual($rootScope);
+
+ $rootScope.select = false;
+ $rootScope.$apply();
+ expect(element.text()).toEqual('Hello: Misko!');
+ expect(widgetScope.$$nextSibling).toEqual(null);
+ });
+ });
+
+
+ it('should support transcluded element on root content', function() {
+ var comment;
+ module(function($compileProvider) {
+ $compileProvider.directive('transclude', valueFn({
+ transclude: 'element',
+ compile: function(element, attr, linker) {
+ return function(scope, element, attr) {
+ comment = element;
+ };
+ }
+ }));
+ });
+ inject(function($compile, $rootScope) {
+ var element = jqLite('<div>before<div transclude></div>after</div>').contents();
+ expect(element.length).toEqual(3);
+ expect(nodeName_(element[1])).toBe('DIV');
+ $compile(element)($rootScope);
+ expect(nodeName_(element[1])).toBe('#comment');
+ expect(nodeName_(comment)).toBe('#comment');
+ });
+ });
+ });
+});
generated by cgit v1.2.3 (git 2.25.1) at 2025-11-01 21:50:52 +0000