Angularjs 如何在控制器中获取输入值？

我尝试建立一个应用程序的实时搜索。我做了一个ng更改，记录输入ng模型searchLive并重新加载http请求。但是$scope.searchlive返回未定义，ng更改有效。建议

我的控制器：

.controller('searchCtrl', function($scope, $http) {
$scope.change = function() {
    console.log($scope.searchLive);
    $scope.loadData();
}



$scope.loadData = function () {
        $http.get("http://example.com/?json=get_search_results&include=id,title&search="+ $scope.searchLive +"", {cache:false})
        .success(function(data) {$scope.zoekresultaat = data.posts; });
    };

.controller('searchCtrl', function($scope, $http) {

var pendingTask;

if ($scope.search === undefined) {
  $scope.search = { term:  ""};
  fetch();
}

$scope.change = function() {
  if (pendingTask) {
    clearTimeout(pendingTask);
  }
  pendingTask = setTimeout(fetch, 1000);
};

function fetch() {
  $http.get("http://www.example.com/?json=get_search_results&search=" + $scope.search.term + "&include=id,title,categories")
    .success(function(response) {$scope.zoekresultaat = response.posts; });

}

}

我的模板

      <div class="list">
    <div class="item item-input-inset">
        <label class="item-input-wrapper">
            <input type="text" placeholder="zoek" ng-model="searchLive" ng-change="change()">
        </label>
    </div>            
    <a class="item " href="#/app/post/{{item.id}}" ng-repeat="item in zoekresultaat ">
      <h2>{{item.title}}</h2>
      <p ng-bind-html="item.excerpt"></p>
      <p ng-show="item.excerpt == 0">Geen beschrijving</p>
    </a>
  </div>

---

问题在于嵌套的作用域

模板：

 <div class="list">
        <div class="item item-input-inset">
            <label class="item-input-wrapper"
                <input type="text" placeholder="zoek" ng-change="change()" ng-model="search.term" >
            </label>
        </div>            
        <a class="item " href="#/app/post/{{item.id}}" ng-repeat="item in zoekresultaat ">
          <h2>{{item.title}}</h2>
          <p>{{categories[0].title[}}</p>
        </a>
      </div>

---

}您是否尝试使用控制器作用域？比如,

 <div ng-controller="searchCtrl as ctrl">...</div>

我使用局部变量来避免任何范围冲突

你的html变成了

<div class="list">
<div class="item item-input-inset">
    <label class="item-input-wrapper">
        <input type="text" placeholder="zoek" ng-model="ctrl.searchLive" ng-change="ctrl.change()">
    </label>
</div>            
<a class="item " href="#/app/post/{{item.id}}" ng-repeat="item in ctrl.zoekresultaat ">
  <h2>{{item.title}}</h2>
  <p ng-bind-html="item.excerpt"></p>
  <p ng-show="item.excerpt == 0">Geen beschrijving</p>
</a>

---

我希望它能帮助您

您显示的html是否在ng if/ng switch中？那么您的代码看起来很好。您能在plunkr中重现这个问题吗？如果我使用ng switch，会有什么问题？

<div class="list">
<div class="item item-input-inset">
    <label class="item-input-wrapper">
        <input type="text" placeholder="zoek" ng-model="ctrl.searchLive" ng-change="ctrl.change()">
    </label>
</div>            
<a class="item " href="#/app/post/{{item.id}}" ng-repeat="item in ctrl.zoekresultaat ">
  <h2>{{item.title}}</h2>
  <p ng-bind-html="item.excerpt"></p>
  <p ng-show="item.excerpt == 0">Geen beschrijving</p>
</a>