Доступ к полю ввода из контроллера Angular приводит к неопределенности

Question

Итак, у меня есть окно поиска, в которое я ввожу текст, а затем отправляю, это должно отправить данные на мой контроллер Angular и позволить мне получить к нему доступ, однако я просто получаю неопределенное значение при этом.

Проблема возникает при попытке доступа к полю с помощью $scope.searchtext

Мой код выглядит следующим образом:

angular.module('starter.controllers', [])

.controller('SearchCtrl', function ($scope, $http, $ionicLoading) {

$scope.results = [];

$scope.search = function () {
    $ionicLoading.show({ template: 'Loading...' });

    $http.get('https://www.googleapis.com/youtube/v3/search?part=snippet&q=' + $scope.searchtext + '&key=').
        then(function (data) {

            var searchResults = data

            angular.forEach(searchResults.data.items, function (val, i) {

                $http.get('https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails&id=' + val.id.videoId + '&key=').
                then(function (data) {

                    var durationResults = data
                    var duration = durationResults.data.items[0].contentDetails.duration.replace("PT", "").replace("H", ":").replace("M", ":").replace("S", "")

                    $scope.results.push({ thumbnail: val.snippet.thumbnails.medium.url, title: val.snippet.title, channel: durationResults.data.items[0].snippet.channelTitle, description: val.snippet.description, duration: duration })
                });

            });
        });

    $ionicLoading.hide();
};

})


<ion-view title="Search for Music">

    <ion-content scroll="true" class="has-header padding">

        <form ng-submit="search()" class="list list-inset">
            <label class="item item-input">
                <i class="icon ion-search placeholder-icon"></i>
                <input type="search" name="searchtext" ng-model="searchtext" placeholder="Search">
            </label>
        </form>

        <ion-list>
            <ion-item ui-sref="home" ng-repeat="result in results" class="item item-thumbnail-left">
                <img src="{{result.thumbnail}}">
                <h2>{{result.title}}</h2>
                <strong>{{result.channel}}</strong>
                <p>{{result.description}}</p>
                <p>Duration: {{result.duration}}</p>
            </ion-item>
        </ion-list>

    </ion-content>
</ion-view>

Answer 1

ion-content создает дочернюю область, имеющую дело с этим DOM. В этом случае вы можете использовать наследование AngularJS Prototypal.

Код

.directive('ionContent', [
  '$parse',
  '$timeout',
  '$ionicScrollDelegate',
  '$controller',
  '$ionicBind',
function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    require: '^?ionNavView',
    scope: true, //<-- this creates a prototypically inherited scope
    template:
    '<div class="scroll-content">' +
      '<div class="scroll"></div>' +
    '</div>',

Соблюдайте правило точки при объявлении ng-model как определить searchtext как свойство объекта, которое будет следовать прототипу javascript.

наценка

<input type="search" name="searchtext" ng-model="model.searchtext" placeholder="Search">

контроллер

$scope.model = {};

Подобный ТАК ответ здесь

Answer 2

Использование также может использовать $parent для доступа к значению контроллера.

<input type="search" name="searchtext" ng-model="$parent.searchtext" placeholder="Search">