Почему моя переменная ng-model undefined в контроллере?

У меня возникают проблемы с $scope в моем проекте angular js. Когда я использую ng-model = "modelExample" в поле ввода, например, я не могу получить к нему доступ в js, используя $scope.modelExample. У кого-то еще была аналогичная проблема?

Это странно, функция вызывается, но ng-модель не связывается. См. Мой код ниже, функция refreshResults() вызывается, когда я отправляю форму, но $scope.search возвращается как undefined.

angular.module('starter', 
    ['ionic', 
    'starter.controllers', 
    'starter.filters', 
    'akoenig.deckgrid', 
    "angucomplete",
    // 'ui.bootstrap', 
    'starter.services'])

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html",
            controller: 'AppCtrl'
        })

        .state('app.browse', {
            url: "/browse",
            views: {
                'menuContent' :{
                    templateUrl: "templates/browse.html",
                    controller: 'BrowseCtrl'
                }
            }
        })

        .state('app.search', {
            url: "/search",
            views: {
                'menuContent' :{
                    templateUrl: "templates/search.html",
                    controller: 'SearchCtrl'
                }
            }
        })
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/browse');
});


angular.module('starter.controllers', [])
.controller('SearchCtrl', function($scope) {
    $scope.refreshResults = function() {
        console.log($scope.search);
    };
})


<ion-view>
    <ion-content class="has-header">
        <form ng-submit="refreshResults()" class="bar bar-header item-input-inset">
            <label class="item-input-wrapper">
                <i class="icon ion-ios7-search placeholder-icon"></i>
                <input type="search" placeholder="Search..." ng-model="search">
            </label>
        </form>
    </ion-content>
</ion-view> 

Ответ 1

@DavidTryon решила мою проблему в комментариях. Я неправильно использовал область. Мне нужно было использовать объект, а не строку. Другими словами, мне нужно сделать что-то вроде ng-model="search.term" not ng-model="search" и использовать его в js следующим образом: $scope.search.term. Это связано с наследованием, но длинная история, если ваша ng-модель не имеет точки (.) В ней, вы делаете это неправильно.

Здесь больше информации: http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

Спасибо Дэвиду!

Tom

Ответ 2

Или установите ng-controller = "SearchCtrl" в тег с содержанием ионов, как показано ниже:

<ion-content class="has-header" ng-controller="SearchCtrl">