Geek Answers Handbook

UI-Router Multiple Views Single controller not working

I would like to use one controller defined in the views, but $scope doesn’t define anything. Is there any way to do this? Please share a simple example to understand.

I have this index.html

 <body ng-app="ehc"> <h1>{{home}}+{{a}}+{{b}}</h1> <ion-side-menus enable-menu-with-back-views="false" delegate-handle="left"> <!-- Left menu --> <ion-side-menu side="left" is-enabled="true"> <ion-header-bar class="bar-stable">AAA</ion-header-bar> <ion-content> <div class="list"> <div class="item item-divider"> Candy Bars </div> </div> </ion-content> </ion-side-menu> <ion-side-menu-content edge-drag-threshold="true" drag-content="true"> <!-- Main content, usually <ion-nav-view> --> <ion-nav-bar class="bar-positive" > <ion-nav-title> <h2>hello world title *{{home}}*</h2> </ion-nav-title> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> </ion-nav-buttons> </ion-nav-bar> <ion-view> <ion-content class="has-header"> <div class="row"> <div class="col-50"> <div ui-view="a"></div> </div> <div class="col-50"> <div ui-view="b"></div> </div> </div> </ion-content> </ion-view> </ion-side-menu-content> <script type="text/ng-template" id="templates/a.html"> <ion-view> <ion-content class="has-header"> **{{a}}** </ion-content> </ion-view> </script> <script type="text/ng-template" id="templates/b.html"> <ion-view> <ion-content class="has-header"> **{{b}}** </ion-content> </ion-view> </script> </body> <script src="js/app.js"></script>

And this is my app.js model definition

 var app = angular.module("ehc", ["ionic"]) .config(function ($urlRouterProvider, $stateProvider) { $urlRouterProvider.otherwise('/'); $stateProvider.state('Home', { url: '/', controller: "HomeCtrl", //template:"<ion-header-bar></ion-header-bar><ion-content><h1>hello dal AngularJs</h1></ion-content>", views: { "a": { templateUrl: 'templates/a.html' }, "b": { templateUrl: 'templates/b.html' } } }); }).controller("HomeCtrl", ["$scope", "$ionicSideMenuDelegate", "$routeParams", "config", "$q", "$http"], function ($scope, $ionicSideMenuDelegate, $routeParams, config, $q, $http) { $scope.toggleLeft = function () { $ionicSideMenuDelegate.toggleLeft(); }; //carico le lingue e il menu console.log("AAAAAAAAAAAA"); $scope.home = "Pippo"; $scope.a="XAX"; $scope.b="XBX"; })
Console

empty as well as the area in the html template. If you have a solution, use a very simple example.

I read here and I thought it worked. Rakrap Jaknap replied 2015-04-17 08:01

+5
angularjs state angular-ui-router ionic-framework ionic-view
source share
1 answer

A very similar problem: Why does the controller not work in angularjs UI router?

Item here:

The controller always belongs to the view, never indicate.

Other words, in order to use a controller of the same type (but two instances for each view), we must make this declaration:

  $stateProvider.state('Home', { url: '/', // instead of this //controller: "HomeCtrl", views: { "a": { templateUrl: 'templates/a.html', controller: "HomeCtrl", // we need this }, "b": { templateUrl: 'templates/b.html', controller: "HomeCtrl", // and also this } } });

In case we want to share some things among many views, we need a different technique than the “same controller”. Cm:

How do I share $ scope data between states in an angularjs url router?

Another understanding:

scope and implementation of the controller using the ui router

And including typescript, there is a detailed description and an example of how all views / states can focus on some common RootModel

Angular digest loop in progress, but ng-bind value is not updated

+9
source share

More articles:


All Articles