Hi folk !! I've been programming a couple of days with angularjs and I made a mess about views and nested views. I'm sure that I have to use ui-router because I want several views in my app but I don't know how build my app, I'm going to explain the app as better as possible.
My index.html <https://lh3.googleusercontent.com/-RNQjUFgUWXU/VVJQ-YG1kJI/AAAAAAAAAOc/vl8j9PHgJto/s1600/view1.png> index.html As you can see in above image, I have a side bar with some options and when I click over one the content must be loaded in ui-view, Besides, the url loaded has another view nested. For example, when I click an option I load modelador.html which has a ui-view called "viewModelador", What I want is that when I click an option from tree.html load his content in "viewModelador". <https://lh3.googleusercontent.com/-OhQgSoJwxPs/VVJWcfTNckI/AAAAAAAAAOo/EFCU5S4OzRY/s1600/view2.png> modelador.html Furthermore, the building of $stateProvider is dynamically because the options come from database, for this reason in main.html I've put a ngInclude directive to load the partial html. For example, database returns a JSON like that, ({name:'opcion1', url:'app/components/modelador/modelador.html') when I put the route /main the main.html is loaded and after modelador.html thanks to ngInclude Hope I explained well, the idea is achieve a view inside view being this loaded by ngInclude. Any help will be very appreciated. Thanks in advance. Check out my code: <!DOCTYPE html> <html lang="en" ng-app="ebpm" class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Expert BPM</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> </head> <body> <div class="main" > <div comp-navbar-bpm ></div> <div comp-menu-bpm ></div> <div class="page-content-main"> <div class="container-fluid" ui-view ></div> </div> </div> <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-loader/angular-loader.js"></script> <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> <!-- inject:js --> <!-- Bootstrapping --> <script src="app/app.module.js"></script> <!-- Navbar --> <script src="app/components/navbar.module.js"></script> <script src="app/components/navbar.service.js"></script> <script src="app/components/navbar.directive.js"></script> <script src="app/components/sidebar.service.js"></script> <script src="app/components/sidebar.directive.js"></script> </body></html> app.module.js (function() { 'use strict'; angular .module('ebpm', ['ui.router', 'ebpm.navbar', 'ebpm.modelador']) .constant('CONFIG_EBPM', { APP_NAME: 'Expert BPM', APP_ID: 'WKFLW' }) .config(configRoutes); configRoutes.$inject = ['$urlRouterProvider', '$stateProvider']; function configRoutes($urlRouterProvider, $stateProvider) { $stateProvider .state('main', { url: '/main/:urlPlsql', templateUrl: 'app/components/main.html', controller: function($scope, $stateParams) { $scope.urlPlsql = function() { return $stateParams.urlPlsql; //return $sce.trustAsResourceUrl($stateParams.urlPlsql); } } }) .state('main.viewModelador', { url: '/main/:urlPlsql', views: { "viewModelador": { templateUrl: 'app/modelador/contenido.html', controller: function($scope, $stateParams) { console.log($stateParams); $scope.modContenido = function() { return $stateParams.urlPlsql; //return $sce.trustAsResourceUrl($stateParams.urlPlsql); } } } } }); } })(); main.html <div data-ng-include src="urlPlsql()" ></div> contenido.html <div data-ng-include src="modContenido()" ></div> modelador.html <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar" id="treeRecipient"> <div data-ng-include="'app/modelador/tree.html'"></div> </div> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2" data-ui-view="viewModelador"> </div> </div> </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.
