5

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

Improve this question

1 Answer 1

Reset to default
9

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I had seen, but it does not work Example i use this: {{a}} outside views (<div ui-view="a"></div>) a or b result is: {{a}} = empty string inside views (<div ui-view="a"></div>) a and b result is: {{a}} = {{a}} outside, angular try to traslate {{a}} but into template no
Sorry, I do not understand your comment. If you can create plunker with your issue, I am ready to assist. But in general - if you want Home state to have some outer view-template and then some inner-views - you should use absolute naming. There could be some hint for you stackoverflow.com/q/28800644/1679310
ok, resolved. I had seen that article. the problem is in controller definition: .controller("name",["aaa",function(aaaa){}]) , the closing of the bracket square is not corret in my code. but outside the <div ui-view="a"></div> how to use $scope?
Good to see you have a progress. And keep in mind - controller belongs to view not to state ;)
When HomeCtrl controller is specified in both views, do you wind up with 2 instances of the controller, or is the same instance shared?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.