Hi !! I think that with this I got it solved.
http://plnkr.co/edit/qrKFe9uSUkEDdyD23mNr?p=preview El martes, 12 de mayo de 2015, 21:55:22 (UTC+2), Antonio Pérez García escribió: > > 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.
