Sharing ng-model data between states in ui-router

Question

I cannot seem to be able to get this form to update my model. It worked using ng-route but I decided to changed to ui-router as I wanted to nest templates.

I've tried a few things from here How do I share $scope data between states in angularjs ui-router? but no luck.

home.html

<form class="input-lg m-t m-l-n-xs hidden-lg hidden-md hidden-sm" role="search">
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-btn">
        <button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
      </span>
      <input type="text" ng-model="searchQuery" ng-change="changeView('search')" class="form-control input-sm no-border rounded" placeholder="Search songs, albums...">
    </div>
  </div>
</form>

Controller

  angular.module('musica', ['ui.bootstrap', 'ngFacebook', 'spotify', 'cb.x2js', 'ngRoute', 'ui.router'])
   .config(function ( $facebookProvider, SpotifyProvider, $routeProvider, $httpProvider, $stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise("/");
    $stateProvider
        .state('login', {
        url: "/",
            templateUrl: "partials/login.html",
        }).state('home', {
            templateUrl: "partials/home.html",
        }).state('home.select', {
        templateUrl: "partials/home.select.html"
        }).state('home.search', {
            templateUrl: "partials/home.search.html",
        }).state('home.queue', {
        templateUrl: "partials/home.queue.html"
        }).state('join', {
        templateUrl: "partials/join.html"
        }).state('creating', {
        templateUrl: "partials/creating_venue.html"
        }).state('home.server', {
        templateUrl: "partials/home.server.html"
        })

})

.controller( 'DemoCtrl', ['$scope','$rootScope', '$location', '$facebook', 'Spotify', 'x2js', '$http', '$state', 'globalStore', function ($scope, $rootScope, $location, $facebook, Spotify, x2js, $http, $state, globalStore) {

$scope.searchQuery='hello';

$scope.changeView = function(view){
        if(!$state.is('home.search'))
        {
            $state.go('home.search');
        } 
        $scope.searchTrack();
    };

$scope.searchTrack = function () {
    console.log('searching ' + $scope.searchQuery.query);
    Spotify.search(this.searchQuery.query, 'track').then(function (data) {
        $scope.tracks = data.tracks.items;
    });
};

If I then type in the search box all I get is hello and not the updated value. I thought that since I don't mention controllers in the state provider that only one controller would be instantiated. I would really like to know what is going on. Thank you very much.

score 0 · Accepted Answer · edited May 23 '17 at 12:15

0

One think with $scope sharing is - we need a reference, not valueType.

So, if we want to share data among 'home' hierarchy family... the home controller just should introduce Model = {}

.state('home', {
    templateUrl: "partials/home.html",
    controller: function($scope){ $scope.Model = {}},
    ...

And later we can use that to share data

$scope.Model.searchQuery = 'hello';

And

<input type="text" ng-model="Model.searchQuery" ...

Also check this: Model in a modal window in angularjs is empty

edited May 23 '17 at 12:15

Community

1
1

answered Nov 23 '15 at 13:27

Radim Köhler

122,561
47
239
335

Thanks for you help. I modified my code using your example. I did leave out $scope.Model.searchQuery = 'hello'; When typing into the search box I get "cannot read searchQuery of undefined" which is odd as we introduce it. – patrick_corrigan Nov 23 '15 at 13:43
You must be sure, that both states are UNDER home.. then they will inherit $scope and will have access to stuff defined in 'home'. Cannot you show your real code? Because you show some DemoCtrl... but it is NOT part of any state definition. E.g. state `.state('home.select', {` should define controller:'DemoCtrl'... – Radim Köhler Nov 23 '15 at 13:45
NO entire controller... it is not needed... just WHERE is your controller used. It must be part of the state/view - I would suggest.. do observe the example here - http://stackoverflow.com/q/27696612/1679310. Play with that plunker to understand how it works – Radim Köhler Nov 23 '15 at 13:47
1

I understand now. You are right I don't reference it anywhere inside any state definition. – patrick_corrigan Nov 23 '15 at 13:51
Ok I understand how it works now and can get it to work by instantiating a new controller for each view and using $scope.Model = $scope.Model || {searchQuery : "xxx"}; Is there a way to just have one controller instance? – patrick_corrigan Nov 23 '15 at 15:03

Sharing ng-model data between states in ui-router

1 Answers1