Geek Answers Handbook

Corner Window Directive

I am trying to create an angularJS directive for Twitter Bootstrap Modal.

var demoApp = angular.module('demoApp', []); demoApp.controller('DialogDemoCtrl', function AutocompleteDemoCtrl($scope) { $scope.Langs = [ {Id:"1", Name:"ActionScript"}, {Id:"2", Name:"AppleScript"}, {Id:"3", Name:"Asp"}, {Id:"4", Name:"BASIC"}, {Id:"5", Name:"C"}, {Id:"6", Name:"C++"} ]; $scope.confirm = function (id) { console.log(id); var item = $scope.Langs.filter(function (item) { return item.Id == id })[0]; var index = $scope.Langs.indexOf(item); $scope.Langs.splice(index, 1); }; }); demoApp.directive('modal', function ($compile, $timeout) { var modalTemplate = angular.element("<div id='{{modalId}}' class='modal' style='display:none' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'><div class='modal-header'><h3 id='myModalLabel'>{{modalHeaderText}}</h3></div><div class='modal-body'><p>{{modalBodyText}}</p></div><div class='modal-footer'><a class='{{cancelButtonClass}}' data-dismiss='modal' aria-hidden='true'>{{cancelButtonText}}</a><a ng-click='handler()' class='{{confirmButtonClas}}'>{{confirmButtonText}}</a></div></div>"); var linkTemplate = "<a href='#{{modalId}}' id= role='button' data-toggle='modal' class='btn small_link_button'>{{linkTitle}}</a>" var linker = function (scope, element, attrs) { scope.confirmButtonText = attrs.confirmButtonText; scope.cancelButtonText = attrs.cancelButtonText; scope.modalHeaderText = attrs.modalHeaderText; scope.modalBodyText = attrs.modalBodyText; scope.confirmButtonClass = attrs.confirmButtonClass; scope.cancelButtonClass = attrs.cancelButtonClass; scope.modalId = attrs.modalId; scope.linkTitle = attrs.linkTitle; $compile(element.contents())(scope); var newTemplate = $compile(modalTemplate)(scope); $(newTemplate).appendTo('body'); $("#" + scope.modalId).modal({ backdrop: false, show: false }); } var controller = function ($scope) { $scope.handler = function () { $timeout(function () { $("#"+ $scope.modalId).modal('hide'); $scope.confirm(); }); } } return { restrict: "E", rep1ace: true, link: linker, controller: controller, template: linkTemplate scope: { confirm: '&' } }; });​

Here is a JsFiddle example http://jsfiddle.net/okolobaxa/unyh4/15/

The handler () function is executed as many times as directives on the page. What for? What is the right way?

+8
angularjs
source share
4 answers

AngularStrap has a working built-in implementation for Bootstrap3 that uses ngAnimate from AngularJS v1.2 +

You can also check:

+7
source share

I found that simply using twitter bootstrap modals, as the tags loaded on twitter boottrap say, is enough to make them work.

I use a modal form to edit the user form on my admin page. The button that I launch to launch has the ng-click attribute, which passes the user ID to a function in this area, which in turn passes this message to the service. The content of the modal object is bound to its own controller, which listens for changes from the service and updates the values ​​for display in the form.

Thus, the ng-click attribute actually disables data transfer, the modal is still triggered using data and href tags. As for the content of the modal itself, it is partial. So, I have several buttons on the page that launch one instance of the module, which is in the markup, and depending on the button click, the values ​​in the form in this module differ.

I will look at my code and see if I can pull everything out of it to create a demo version of plnkr.

EDIT: I threw together a plunger demo demonstrating essentially what I use in my application: http://embed.plnkr.co/iqVl0Wb57rmKymza7AlI/preview

A bonus, he received several tests to ensure the correspondence of two password fields (or underlines them as erroneous) and disables the submit button if the passwords do not match, or for the username and password fields for new users are empty. Of course, save does nothing, because it is just a demo.

Enjoy.

+8
source share

Well, if you do not want to invent it, otherwise I think that there is already a solution.

Give it up on AngularUI. It works without bootstrap twitter.

+6
source share

I know that it may be late, but I started trying to understand why the handler got it several times as an exercise, and I could not stop to the end: P

The reason was that each div created for each mod did not have a unique identifier, as soon as I fixed that everything started to work. Do not ask me exactly what the reason for this probably has something to do with calling $ ('#' + scope.modalId) .modal ().

Just though I have to post my opinion if anyone else is trying to figure it out :)

+4
source share

More articles:


All Articles