Angular + Dialog
http://angularjs.org/
by Yonathan Benitah
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5-master-42833aa/angular-material.js"></script>
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5-master-42833aa/angular-material.css">
<script src="https://npmcdn.com/[email protected]/build/pdf.js"></script>
<script src="https://npmcdn.com/[email protected]/build/pdf.worker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-pdf/2.0.0/angular-pdf.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl" layout="column">
<md-button ng-click="open($event)">Open Dialog</md-button>
<span>{{text}}</span>
<script type="text/ng-template" id="dialog.html">
<md-dialog ng-cloak>
<md-dialog-content>
<md-button ng-click="changetext()">click here to change the text</md-button>
</md-dialog-content>
</md-dialog>
</script>
</div>
</div>
JavaScript
var myApp = angular.module('myApp',['ngMaterial']);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller("MyCtrl", ["$scope", "$mdDialog", function($scope, $mdDialog){
$scope.text = "text";
$scope.open = function(ev){
$mdDialog.show({
controller: 'DialogController',
templateUrl: 'dialog.html',
clickOutsideToClose:true,
scope:$scope
});
}
}
]);
myApp.controller("DialogController", ["$scope", "$mdDialog", function($scope, $mdDialog){
// $scope.text = "coucou";
$scope.changeText = function(){
$scope.text = "coucou";
}
}
]);