Question

好吧。。。粗略看看我的代码应该让我免于解释我是Angular的新手，我敢肯定。

我正在构建一个允许用户搜索文本的应用程序，在文本输入的值发生更改时查询数据库，然后生成匹配列表。后端很简单，正在工作。在前面，我有搜索字段和结果容器：

<div id="search" ng-controller="FormController">
    <input type="text" class="form-control input-lg" placeholder="Start typing . . ." ng-keypress="search()" ng-model="searchField" id="search-field">

    <div id="results" class="alert alert-success">
        <a href="#" ng-href="#" ng-repeat="item in items" ng-click="add(item)">
            <p class="lead text-left">
                <span>{{item.DisplayName}} -</span>
                <span> {{item.Description}} -</span>
                <span> {{item.Count}} ct. -</span>
                <span> ${{item.Price}}</span>
                <span class="glyphicon glyphicon-check pull-right"></span>
            </p>
        </a>
        <h4>{{noResults}}</h4>
    </div>
</div>

在我的控制器中调用两种方法：

$scope.search = function()
{
    $scope.$watch('searchField', function (newValue)
    {
        if (newValue)
        {
            $http.post('/search', 
            {
                val: newValue
            })
            .success(function (response)
            {
                if (response.length > 0)
                {
                    $scope.items = response;
                    $scope.noResults = '';

                }
                else 
                {
                    $scope.noResults = 'No Matches Found';
                    $scope.items = '';
                }
            })
            .error(function (response)
            {
                console.log('Oooops, error: ' + response);
            });
        }
    });
};

$scope.add = function(item)
{
    console.log('added');
};

$scope.search()虽然可能有点凌乱，但仍在工作。但是，点击时不会调用add()方法。我猜我当时根本就不在控制器的范围内，但经过大量的搜索后，我转向你，难倒。我正处于“敲打你的头脑 - 反对键盘 - 并且希望为它做神奇工作”的舞台。

这是继承问题吗？

**更新** 这是整个控制器（注释中建议移除$watch）：

var app = angular.module('AppModule', ['toastr']);

app.controller('FormController', ['$scope', '$http', 'toastr', function($scope, $http, toastr)
{

    $scope.search = function()
    {
        var searchText = $scope.searchField;

        $http.post('/search', 
        {
            val: $scope.searchField
        })
        .success(function (response)
        {
            if (response.length > 0)
            {
                $scope.items = response;
                $scope.noResults = '';

            }
            else 
            {
                $scope.noResults = 'No Matches Found';
                $scope.items = '';
            }
        })
        .error(function (response)
        {
            console.log('Oooops, error: ' + response);
        });
    };

    $scope.add = function(item)
    {
        console.log('added');
    };

}]);

更新2

Here是一个吸引人，显示所有内容都在使用add()方法（我可能在此版本中重命名了该方法）。当然，取代我的$http帖子，我已经硬编码了从服务器返回的响应。

Answer 1

CSS问题。注释掉你的CSS的 ugh ，8382行（设置#results显示为无）。它会工作的。你最终如何在CSS中解决这个问题是一个不同的问题。

Answer 2

穿过你的掠夺者，我必须说发现的问题有点傻。

首先，我在超时时从resultsContainer中删除了用于删除类has-value的代码。这使得addItem的调用成为可能。

  setTimeout(function() {
      resultsContainer.removeClass('has-value');
  }, 1000);

这可以作为解决方案，但是setTimeout ??没发生。

深入挖掘，发现你正在使用display：none for #results。所以我删除了显示css并使用了不透明度。

    #results {
      position: absolute;
      /*display: none; */
       opacity : 0; 
      top: 100%;
      left: 0;
      width: 100%;
    }
    #results.has-value {
      display: block;
       opacity : 1;
    }

这使它在没有超时的情况下工作。 **现在我自己遇到了显示问题的问题：没有螺丝功能。所以你要么调整你的css，要么使用超时代替。 **

另外，请考虑在指令中移动该代码。

更新了plunker here

在ng-repeat中失去控制器范围

2 个答案: