user1326966 user1326966 - 4 months ago 70
AngularJS Question

UI-Router Multiple Views Single Controller not work

I would like to use one controller defined in views, but the

$scope
does not define anything. Is there a way to do this? Please share a simple example in order 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 model definition app.js

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 is empty and also the scope in html template. Please if you have the solution, use very simple example.

I've read here and I thought it worked Rakrap Jaknap answered on 2015-04-17 08:01

Answer

Very similar issue: Why controller does not work in UI-router of angularjs?

The point here is:

Controller always belongs to View, never to state.

Other words, to use same type of controller (but two instances for each view), we have to do that kind of 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 stuff among many views, we need different technique than "same controller". See:

How do I share $scope data between states in angularjs ui-router?

Another insight, could be covered here:

scope and controller instantiation with ui router

And including typescript, there is a detailed description and example how all views/states could target some common RootModel

Angular Digest cycle being ran but ng-bind value not updating