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.
