Angular searchBar指令更改dom

Angular searchBar directive to change dom

本文关键字：dom 指令 searchBar Angular      更新时间：2024-05-31

我在这里定义了一个searchBar指令：

appControllers.directive('searchBar', [function () {
    return {
        controller: "searchCtrl"
    };
}]);

添加到我的离子头栏中，如下所示：

...
<ion-nav-bar class="bar-balanced  material-background-nav-bar">
    <ion-nav-buttons side="left">
        <a class="button button-icon button-clear ion-navicon" menu-toggle="left" ng-click="toggleLeft()"></a>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
        <input type="text" search-bar ng-model="query" ng-change="collectQuery()"></input>
    </ion-nav-buttons>
</ion-nav-bar>
...

这调用collectQuery()很好，但不允许我引用query。

#search-controller.js
appControllers.controller('searchCtrl', function($scope, $stateParams, $http, $q) {
...
$scope.collectQuery = function() {
    cancel();
    canceler = $q.defer();
    clearTimeout(timeout);
    console.log($scope.query);
    timeout = setTimeout(function() {
        search($scope.query);
    }, 300);
};
var search = function(query) {
    $scope.loading = true;
    pendingRequest = $http({
        method: 'GET',
        timeout: canceler.promise,
        url: 'https://website.com/api/' + query
    }).then(function successCallback(response) {
        $scope.hits = response.data.contacts;
        window.data = response;
    }, function errorCallback(response) {
        console.log(response);
    }).finally(function(){
      $scope.loading = false;
    });
    return pendingRequest;
};
...

这总是将undefined输出到控制台，并使用undefined查询api。如果我强迫它用"test"查询api，请求会返回，但DOM不会改变：

<ion-view title="Search">
    <ion-content id="mobile-contract-list-content"><!--search results section-->
        <p>{{query}}</p>
        <i class="fa fa-spinner fa-spin" ng-show="loading"></i>
        <md-list class="ng-hide" ng-show="!loading">
            <div class="search-item" ng-repeat="hit in hits">
                <div class="row detail">
                    <i class="fa fa-{{ hit.category }}"></i>
                    <h5>
                        <a href="" target="_blank">{{ hit.search_term }}</a>
                    </h5>
                </div>
            </div>
        </md-list>
    </ion-content><!--end search results section-->
</ion-view>

我有什么东西不见了吗？我在这里完全被难住了。

最可能的原因是在搜索控制器中，您没有在任何位置定义$scope.query，因此当ng-model更新时，它会在最近的可用父作用域上设置$scope.query。如果您尝试取出ng-show，然后尝试它，那么ng-show之上的下一个可用范围很可能是您的控制器。

如果是这种情况，这就是为什么人们不鼓励将ng模型绑定到基元值，它应该始终绑定到对象的属性。如果您使用controllerAs或component，这是很容易避免的，因为总是有一个关联的对象来放置属性。

然而，如果这不起作用，您可以尝试将ng-change="collectQuery()"更改为ng-change="collectQuery(query)"，因为更改函数的求值范围始终与ng-model相同。至少到那时，您可以将其缩小到模型更新不正确还是范围问题。

相关文章：