I have dynamic loading htmls, I created a directive inorder to load the
html template.
main.html:
<button class="btn" ng-click='toggle()'></button><div class="anim">
<app show='modalShown'></app>
</div>
sub.html:
<div id="sub"></div>
Controller:
$scope.toggle = function() {
$scope.modalShown = !$scope.modalShown;
var htmlcontent = $('.addtl');
htmlcontent.load('sub.html');
$compile(htmlcontent.contents())($scope);
};
app.js:
app.directive('app', function() {
return {
restrict: 'E',
scope: {
show: '='
},
replace: true, // Replace with the template below
transclude: true, // we want to insert custom content inside the
directive
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function() {
scope.show = false;
};
},
template:
"<div class='ng-modal check-element animate-show'
ng-show='show' >" +
"<div class='ng-modal-dialog' ng-style='dialogStyle'>" +
"<div class='ng-modal-close'
ng-click='hideModal()'>Close</div>" +
"<div class='addtl'></div>" +
"</div>" +
"<div class='ng-modal-dialog-content'
ng-transclude></div>" +
"</div>" +
"</div>"
};
});
Onclick of the button the corresponding html template will open and close.
I am trying to add the effect of slide up and down inorder to make my
template look beautiful.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
