從角度控制器訪問輸入字段導致undefined

所以我有一個搜索框，我輸入文本然後提交，這應該發送數據到我的Angular控制器，並允許我訪問它，但我只是越來越未定義所以。從角度控制器訪問輸入字段導致undefined

問題引起試圖通過訪問該字段$ 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>

來源

2015-09-05 Tom Wilson

ion-content確實創建子範圍處理的是DOM，在這種情況下，您可以使用AngularJS Prototypal inheritance。

代碼

.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 = {};

類似SO answer這裏

來源

2015-09-05 17:55:30

啊我明白了，道歉，我是Angular的新手。這是解決我的問題！ –

@TomWilson np ..很高興爲您提供幫助..謝謝 –

使用也可以使用$父到接入控制器的價值。

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

來源

2016-03-28 09:48:48 Abhijeet

從角度控制器訪問輸入字段導致undefined

回答

相關問題