Content directive causes odd child scope?

ionic-v1
1

I’m getting an odd child-scope issue, with the following html view:

<content has-header="true" scroll="true" padding="true">
    <div id="search-bar">
        <div class="item item-input-inset">
            <label class="item-input-wrapper" id="search-input">
                <i class="icon ion-search placeholder-icon"></i>
                <input type="text" placeholder="Search" id="search" ng-model="request" ng-change="search();" />
            </label>
        </div>
    </div>
    <h1>Hello World</h1>
    <p ng-repeat="result in results">{{result.name}}</p>
</content>

When search() function runs, it has no idea what $scope.request is, it becomes undefined. Looking at the scopes through batarang I noticed it’s showing as a child scope. Is that expected? Seems like I should be able to access $scope.request without having to dig through scopes.

If I remove the <content> directive, then the scopes align and are accessible. However I lose the styling associated with the directive.

Here is the code from my controller, It’s taken from the Flickr example app where it works fine:

    var doSearch = ionic.debounce(function(query) {
        console.log($scope.request);
    }, 500);

    $scope.search = function() {
        doSearch($scope.request);
    }
2

Not a good solution, but this is getting me around this issue:

    _.extend($scope, {
        headerTitle: 'Drinks',
        results: [],
        request: 'Beer'
    });

    var doSearch = ionic.debounce(function(query) {
        DrinksService.getProducts(query)
            .success(function(response) {
                console.log(response);
                $scope.results = response.result;
                console.log($scope.results);
            });
    }, 500);

    $scope.search = function() {
        doSearch($scope.$$childTail.request);
    }

    $scope.init = function() {
        doSearch($scope.request);
    }

    $scope.init();

Not sure why I have to go to the private $$childTail to find the request scope. The init $scope.request = 'Beer' works fine on load, but then the scope gets skewed somehow and ends up in a child scope.

3

@neilff, try making @scope.request an object:

$scope.request = {}, then set a field as the ngModel:

<input ng-model="request.query">

Let me know if that works for you.

4

@max Thanks that resolved the issue