javascript - How to inject AngularJS custom directives into a bootstrap pre-loaded modal? -
i new angular.js , after watching codeschool free course decided try different it.
i trying use button to:
- inject angular custom directive existing bootstrap modal body;
- push json array angular controller directive;
- display bootstrap modal
i created following files test:
** pictures-table.html:
<p ng-hide="pictures.length">no pictures</p> <table ng-show="pictures.length"> <thead> <tr> <th>picture</th> <th>label</th> <th>remove</th> </tr> </thead> <tbody> <tr ng-repeat="apic in pictures"> <td><img ng-src="{{apic.pthumb}}"/></td> <td><input type='text' ng-model='apic.text'/></td> <td><button class="close" type="button"><span>×</span></button></td> </tr> </tbody> </table> ** loadng.js:
(function () { var app = angular.module('ngmod', []); app.controller("itemscontroller", function () { var thecontroler = this; thecontroler.item = {id:1, name:"aaaa", pictures: [ {text:"pic 1", plarge:"1.jpg", pthumb:"1s.jpg"}, {text:"pic 2", plarge:"2.jpg", pthumb:"2s.jpg"}, {text:"pic 3", plarge:"3.jpg", pthumb:"3s.jpg"}, {text:"pic 4", plarge:"4.jpg", pthumb:"4s.jpg"} ]}; thecontroler.editpictures = function () { $('.modal-title').html('edit pictures'); $('.modal-body').html('<pictures-table></pictures-table>'); $('#btnlaunchmodal').click(); }; }); app.directive('picturestable', function () { return { restrict: 'e', templateurl: 'pictures-table.html' }; }); })(); i placed standard boostrap modal on botton of "index.html" file, , added hidden button trigger (yeah, copied existing code):
<!doctype html> <html ng-app="ngmod"> <head> <title>testng</title> <link href="bootstrap.css" media="all" rel="stylesheet"> <link href="bootstrap-theme.css" media="all" rel="stylesheet"> </head> <body role="document"> <div class="container theme-showcase" role="main" ng-controller="itemscontroller itemsctrl"> <p><strong>{{itemsctrl.item.id}} -- {{itemsctrl.item.name}}</strong></p> <button class="btn btn-lg btn-default" type="button" ng-click="itemsctrl.editpictures()">call modal</button> <pictures-table></pictures-table> </div> <button id="btnlaunchmodal" type="button" style="display: none" data-toggle="modal" data-target="#themodal"> launch modal </button> <div class="modal fade" id="themodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title"></h4> </div> <div class="modal-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button> <button type="button" class="btn btn-primary">save changes</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="bootstrap.js"></script> <script src="angular.js"></script> <script src="loadng.js"></script> </body> </html> test 01: use directive "picturestable" index file "index.html" (this part works fine):
now problem:
i tried inject custom directive controller function "editpictures". linked function button on index page.
when clicking button "call modal" bootstrap modal displayed, generated html "modal-body" part did not evaluate injected directive. did not attempted set json object yet. injected html looks this:
... <div class="modal-body"> <pictures-table></pictures-table> </div> ... i expecting angular directive's magic take place, missing?
should ignore test , explore other ways inject directive modal? if better approach?
any appreciated.
you need compile directive html via $complile service provided angular , add compiled element (not plain html) modal. try following snippet:
$compile('<pictures-table></pictures-table>')(scope, function(clonedelement, scope) { $('.modal-body').html(clonedelement); }); you have update controller declaration injecting $compile service
app.controller("itemscontroller", ['$compile', function ($compile) { }]); your code should this:
app.controller("itemscontroller", ['$compile','$scope', function ($compile,$scope) { var thecontroler = this; thecontroler.item = {id:1, name:"aaaa", pictures: [ {text:"pic 1", plarge:"1.jpg", pthumb:"1s.jpg"}, {text:"pic 2", plarge:"2.jpg", pthumb:"2s.jpg"}, {text:"pic 3", plarge:"3.jpg", pthumb:"3s.jpg"}, {text:"pic 4", plarge:"4.jpg", pthumb:"4s.jpg"} ]}; $scope.pictures = thecontroler.item.pictures; thecontroler.editpictures = function () { $('.modal-title').html('edit pictures'); $compile('<pictures-table></pictures-table>')($scope, function(clonedelement, $scope) { $('.modal-body').html(clonedelement); }); $('#btnlaunchmodal').click(); }; }]);
Comments
Post a Comment