This is what I want to achieve 1) Have a report parameters html View which should be opened into a jQueryUI Dialog on the click of the OpenReport button in index.html. That way different report parameters Views can be loaded based on clicking different <a href> report links ( which I haven't coded as of yet) 2) Since Angular View supports routing ... want the request routed via the angularJS routers defined in the App.js, that way we would have a single reportController that would load different report Views ( html Views), that would help me use angular MVC Standards 3) I did have a look at angular-ui but cont find anything for a jQuery UI dialog
How do I wrap a Jquery Plugin in a custom directive. If you have some references do send them. Let me know if I am clear now. Thanks Raj On Friday, February 6, 2015 at 1:36:13 AM UTC-5, Kevin Dreßler wrote: > > I couldnt really identify what you are asking for here, as you only > explained what you want to do, but I'll give it a try: > Have you had a look at angular-ui <http://angular-ui.github.io/>? > I really dont like mixin in too much of imperative jQuery thingies, > especially not into controllers. If there really is no angular-ui component > for your needs, better wrap that jQuery plugin in custom directive(s), but > thats just my opinion on best practices here. > > PS: You won't need $(document).ready(...) when wrapping plugin into > directive. > > > Am Freitag, 6. Februar 2015 06:18:52 UTC+1 schrieb Rajaraman Soundararajan: >> >> Planning to use both jQuery and AngularJS because jQuery has many UI >> Widgets available which the latter doesnt have. >> >> Home and Admin buttons work. >> >> Going further >> 1) Want to open a JQuery Dialog Window on the click of a >> button.(OpenReport) >> 2) the reportView.html page should be opened within the dialog. Idea is >> to open different reportParams screen withing the same dialog. Maybe we can >> have a reportController.js >> 3) try to continue to use the routing logic provided by angular JS >> >> Attachment has the project structure. >> >> *index.html* >> <!DOCTYPE html> >> <html> >> <head> >> <title>MVC Demo</title> >> <!--Start : jQuery Script Includes--> >> <link rel="stylesheet" href=" >> https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"; >> >> /> >> <script src=" >> https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js";></script> >> <script src=" >> https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js >> "></script> >> <!--End : jQuery Script Includes--> >> <script type="text/javascript"> >> $(document).ready(function () { >> var dialog = $("#dialogForm").dialog({ >> autoOpen: false, >> height: 300, >> width: 350, >> modal: true >> }); >> $('#openReport').click(function () { >> dialog.dialog("open"); >> }); >> }); >> </script> >> </head> >> <body ng-app="mvcApp"> >> <header class="header" ng-controller="navigationController"> >> <table> >> <thead> >> <tr> >> <th> >> <button type="button" >> ng-click="navigateTo('home')">Home</button> >> </th> >> <th> >> <button type="button" >> ng-click="navigateTo('admin')">Admin</button> >> </th> >> <th> >> <button type="button" >> id="openReport">Report</button> >> </th> >> </tr> >> </thead> >> </table> >> </header> >> <section class="contentView" ng-view /> >> <div id="dialogForm" title="Basic dialog"> >> <p>This is the default dialog which is useful for displaying >> information. The dialog window can be moved, resized and closed with the >> 'x' icon.</p> >> </div> >> <script src=" >> https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js >> "></script> >> <script src=" >> https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.min.js >> "></script> >> <script src=" >> https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-resource.min.js >> "></script> >> >> <script src="app.js"></script> >> <script src="navigationController.js"></script> >> <script src="home/homeController.js"></script> >> <script src="admin/adminController.js"></script> >> </body> >> </html> >> >> *App.js* >> //Define an angular module for our app >> var mvcApp = angular.module('mvcApp', ['ngRoute']); >> >> //Define Routing for app >> mvcApp.config(['$routeProvider', >> function ($routeProvider) { >> $routeProvider. >> when('/home', { >> templateUrl: '/home/homeView.html', >> controller: 'homeController' >> }). >> when('/admin', { >> templateUrl: '/admin/adminView.html', >> controller: 'adminController' >> }). >> otherwise({ >> redirectTo: '/home' >> }); >> }]); >> >> *navigationController.js* >> >> >> 'use strict'; >> mvcApp.controller('navigationController', function ($scope, $location) { >> $scope.navigateTo = function (path) { >> switch(path) >> { >> case "home": >> $location.url('/home'); >> break; >> case "admin": >> $location.url('/admin'); >> break; >> default: >> $location.url('/home'); >> } >> }; >> >> }); >> >> *homeController.js* >> 'use strict'; >> mvcApp.controller('homeController', function ($scope, $location) { >> $scope.searchModel = {}; >> >> $scope.init = function () { >> //alert('homeController init... '); >> }; >> >> var players = [{ name: 'John Doe', point: 45, age: 23, sex: 'M' }, { >> name: 'Kathy Bernert', point: 85, age: 22, sex: 'F' }, { name: 'Johny', >> point: 55, age: 45,sex:'M' }]; >> $scope.players = players; >> $scope.init(); >> }); >> >> *homeView.html* >> <div> >> <table class="playerStyle"> >> <tr> >> <th>Name</th> >> <th>Age</th> >> <th>Point</th> >> </tr> >> <tr ng-repeat="player in players"> >> <td>{{player.name}}</td> >> <td>{{player.age}}</td> >> <td>{{player.point}}</td> >> </tr> >> </table> >> </div> >> >> *adminController.js* >> 'use strict'; >> mvcApp.controller('adminController', function ($scope) { >> $scope.init = function () { >> //alert('adminController init... '); >> }; >> >> var adminAgents = [ >> { name: 'John Doe', role: 'superAdmin', dept: 'Internet Services' >> }, >> { name: 'Athen Hajiro', role: 'dataAdmin', dept: 'Data Services' >> }, >> { name: 'Bill Jarr', role: 'eSAgentAdmin', dept: 'Enterprise >> Services' } >> ]; >> $scope.adminAgents = adminAgents; >> >> $scope.init(); >> }); >> >> *adminView.html* >> <div> >> <table id="adminTableStyle"> >> <thead> >> <tr> >> <th>Name</th> >> <th>Role</th> >> <th>Dept</th> >> <th></th> >> </tr> >> </thead> >> <tbody> >> <tr ng-repeat="adminAgent in adminAgents" ng-class="{red: >> hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false"> >> <td>{{adminAgent.name}}</td> >> <td>{{adminAgent.role}}</td> >> <td>{{adminAgent.dept}}</td> >> <td> >> <input type="button" value="Edit" /> >> <input type="button" value="Delete" /> >> </td> >> </tr> >> </tbody> >> </table> >> </div> >> > -- 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.
