');
+
+ $mdDialog.show(
+ $mdDialog.confirm({
+ parent: parent,
+ ok: 'Next',
+ cancel: 'Back',
+ title: 'Which Way ',
+ content: '
'
+ })
+ );
+
+ runAnimation();
+
+ var container = angular.element(parent[0].querySelector('.md-dialog-container'));
+ var content = angular.element(container[0].querySelector('.mine'));
+
+ expect(content.text()).toBe('Choose');
+ }));
+
+ it('shows a basic confirm dialog with HTML content using custom types', inject(function($rootScope, $mdDialog, $animate) {
+ var parent = angular.element('
');
+
+ $mdDialog.show(
+ $mdDialog.confirm({
+ parent: parent,
+ ok: 'Next',
+ cancel: 'Back',
+ title: 'Which Way ',
+ content: '
Choose'
+ })
+ );
+
+ runAnimation();
+
+ var container = angular.element(parent[0].querySelector('.md-dialog-container'));
+ var content = angular.element(container[0].querySelector('.mine'));
+
+ expect(content.text()).toBe('Choose');
+ }));
+
it('should focus `md-button.dialog-close` on open', inject(function($mdDialog, $rootScope, $document, $timeout, $mdConstant) {
jasmine.mockElementFocus(this);
var parent = angular.element('
');
$mdDialog.show({
- template: '
' +
- '' +
- '' +
- '
' +
+ template: '' +
+ '' +
+ ' ' +
+ ' ' +
+ '
' +
'',
- parent: parent,
+ parent: parent
});
runAnimation();
diff --git a/src/components/tabs/js/tabsDirective.js b/src/components/tabs/js/tabsDirective.js
index a7948b93848..27007d4c91e 100644
--- a/src/components/tabs/js/tabsDirective.js
+++ b/src/components/tabs/js/tabsDirective.js
@@ -149,7 +149,7 @@ function MdTabs () {
ng-disabled="tab.scope.disabled"\
md-swipe-left="$mdTabsCtrl.nextPage()"\
md-swipe-right="$mdTabsCtrl.previousPage()"\
- md-template="::tab.label"\
+ md-tabs-template="::tab.label"\
md-scope="::tab.parent">\
\
\
@@ -165,7 +165,7 @@ function MdTabs () {
ng-focus="$mdTabsCtrl.hasFocus = true"\
ng-blur="$mdTabsCtrl.hasFocus = false"\
ng-repeat="tab in $mdTabsCtrl.tabs"\
- md-template="::tab.label"\
+ md-tabs-template="::tab.label"\
md-scope="::tab.parent">\
\
\
@@ -187,7 +187,7 @@ function MdTabs () {
\'md-no-scroll\': $mdTabsCtrl.dynamicHeight\
}">\
\
diff --git a/src/components/tabs/js/templateDirective.js b/src/components/tabs/js/tabsTemplateDirective.js
similarity index 88%
rename from src/components/tabs/js/templateDirective.js
rename to src/components/tabs/js/tabsTemplateDirective.js
index 8c421c4fb85..6d0f54923f7 100644
--- a/src/components/tabs/js/templateDirective.js
+++ b/src/components/tabs/js/tabsTemplateDirective.js
@@ -1,13 +1,13 @@
angular
.module('material.components.tabs')
- .directive('mdTemplate', MdTemplate);
+ .directive('mdTabsTemplate', MdTabsTemplate);
-function MdTemplate ($compile, $mdUtil) {
+function MdTabsTemplate ($compile, $mdUtil) {
return {
restrict: 'A',
link: link,
scope: {
- template: '=mdTemplate',
+ template: '=mdTabsTemplate',
connected: '=?mdConnectedIf',
compileScope: '=mdScope'
},
diff --git a/src/core/core.js b/src/core/core.js
index 48b82a50dd0..7a200adb4b5 100644
--- a/src/core/core.js
+++ b/src/core/core.js
@@ -1,4 +1,3 @@
-
/**
* Initialization function that validates environment
* requirements.
@@ -10,8 +9,8 @@ angular
'material.core.gestures',
'material.core.theming'
])
- .config( MdCoreConfigure );
-
+ .directive('mdTemplate', MdTemplateDirective)
+ .config(MdCoreConfigure);
function MdCoreConfigure($provide, $mdThemingProvider) {
@@ -24,7 +23,35 @@ function MdCoreConfigure($provide, $mdThemingProvider) {
.backgroundPalette('grey');
}
-function rAFDecorator( $delegate ) {
+function MdTemplateDirective($compile) {
+ return {
+ restrict: 'A',
+ scope: {
+ template: '=mdTemplate'
+ },
+ link: function postLink(scope, element) {
+ scope.$watch('template', assignSafeHTML);
+
+ /**
+ * To add safe HTML: assign and compile in
+ * isolated scope.
+ */
+ function assignSafeHTML(value) {
+ // when the 'compile' expression changes
+ // assign it into the current DOM
+ element.html(value);
+
+ // Compile the new DOM and link it to the current scope.
+ // NOTE: we only compile .childNodes so that we don't get
+ // into infinite loop compiling ourselves
+ $compile(element.contents())(scope);
+ }
+ }
+ };
+
+}
+
+function rAFDecorator($delegate) {
/**
* Use this to throttle events that come in often.
* The throttled function will always use the *last* invocation before the