I agree with Kevin. You can wrap plugin into an angular directive. On Fri, Feb 6, 2015 at 1:36 AM, Kevin Dreßler <[email protected]> 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. > -- *Rishi Tandon* Pearson Learning Technology Group Mobile: (310) 926-9032 Pearson Always Learning Learn more at www.pearson.com -- 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.
