Angular Directive阻止更新ng-repeat集合

时间:2015-03-11 12:51:48

标签: angularjs ionic-framework ionic angular-directive

我正在使用离子框架创建移动应用程序。我面临以下问题。我创建了一个高级搜索选项并添加了一个弹出选项,用户可以在其中选择高级搜索条件。但由于某种原因,甚至我的控制器中的$ scope.companies数组似乎也没有将这些变化反映回我的观点。这似乎与我的指令有关,但我似乎无法弄清楚如何解决它。非常感谢您的帮助。如果我删除该指令它工作正常,但我需要它为我的动态搜索。

这是我的控制器代码

.controller('CompanySearchCtrl', function ($scope, $state, $ionicModal, $ionicPopup, regions, countries, crmdataservice, companyservice) {
        $scope.showAlert = function(title, msg) {
            var alertPopup = $ionicPopup.alert({
                title: title,
                template: msg,
                cssClass: 'bar-assertive',
                okType: 'button button-assertive'
            });
        };
        $scope.regions = regions.data;
        $scope.countries = countries.data;
        var value = window.localStorage.getItem("loginId");
        if(!value){
            $state.go('login');
        }
        $scope.companies = [];
        $scope.getCompaniesByName = function (name) {
            return crmdataservice.getCompaniesByName(name);
        };
        $scope.setCompanyId = function (companyId) {
            companyservice.setCompanyId(companyId);
        };
        $ionicModal.fromTemplateUrl('templates/company-search-filter.html', {
            scope: $scope,
            animation: 'slide-in-up'
        }).then(function (modal) {
            $scope.modalFilter = modal;
        });
        $scope.openModalFilter = function () {
            $scope.advanceSearch = {
                "regionId": "",
                "country": "",
                "showTop10": false
            };
            $scope.modalFilter.show()
        };
        $scope.closeModalFilter = function (search) {
            if(search){
                if($scope.advanceSearch.regionId && $scope.advanceSearch.country){
                    $scope.showAlert("ERROR", "Please don't select both region and country. Please select one");
                }
                else if(!$scope.advanceSearch.regionId && !$scope.advanceSearch.country){
                    $scope.showAlert("ERROR", "Please select a region or country to search.");
                }
                else{
                    if($scope.advanceSearch.regionId && !$scope.advanceSearch.country){
                        crmdataservice.getCompaniesByRegion($scope.advanceSearch.regionId, $scope.advanceSearch.showTop10).then(function(response){
                            $scope.companies = response.data;
                        }, function(error){
                            $scope.showAlert("ERROR", error.data);
                        });
                    }
                    if(!$scope.advanceSearch.regionId && $scope.advanceSearch.country){
                        crmdataservice.getCompaniesByCountry($scope.advanceSearch.country, $scope.advanceSearch.showTop10).then(function(response){
                            $scope.companies = response.data;
                        }, function(error){
                            $scope.showAlert("ERROR", error.data);
                        });
                    }
                    $scope.modalFilter.hide();
                }
            }
            else{
                $scope.modalFilter.hide();
            }
        };
        $scope.$on('$destroy', function () {
            $scope.modalFilter.remove();
        });
        $scope.clearSearchFilter = function(){
            $scope.advanceSearch = {
                "regionId": "",
                "country": "",
                "showTop10": false
            };
        };
    })

这是我的模板视图代码

<ion-view view-title="Search Companies">
    <ion-content>
        <div class="bar bar-header bar-positive item-input-inset">
            <qbuild-search class="search-wrapper-light" placeholder="Search for a company" min-length="1"
                           model="companies" source="getCompaniesByName(name)"></qbuild-search>
            <i class="button button-clear icon ion-funnel" ng-click="openModalFilter()"></i>
        </div>
        <ion-list ng-show="companies.length">
            <ion-item ng-repeat="company in companies" href="#/app/companymaster"
                      ng-click="setCompanyId(company.companyId)">
                <div class="item item-avatar">
                    <img src="img/company.png"/>
                    <h2>{{company.companyName}}</h2>
                    <p>
                        {{company.city}}, {{company.province}}
                        <br/>
                        {{company.zipCode}} {{company.country}}
                        <br ng-show="company.prEmail"/>
                        <a ng-show="company.prEmail" href="mailto:{{company.prEmail}}">{{company.prEmail}}</a>
                        <br ng-show="company.webSite"/>
                        <a ng-show="company.webSite" href="{{company.webSite}}">{{company.webSite}}</a>
                    </p>
                </div>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

这是我的指令代码

angular.module('starter.directives', [])
    .directive('qbuildSearch', function () {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                getData: '&source',
                model: '=?',
                search: '=?filter'
            },
            link: function (scope, element, attrs) {
                attrs.minLength = attrs.minLength || 0;
                scope.placeholder = attrs.placeholder || '';
                scope.search = {
                    value: ''
                };
                if (attrs.class)
                    element.addClass(attrs.class);

                if (attrs.source) {
                    scope.$watch('search.value', function (newValue, oldValue) {
                        if (newValue.length > attrs.minLength) {
                            scope.getData({
                                name: newValue
                            }).then(function (results) {
                                scope.model = results.data;
                            });
                        } else {
                            scope.model = [];
                        }
                    });
                }

                scope.clearSearch = function () {
                    scope.search.value = '';
                };
            },
            templateUrl: 'templates/qbuildsearch.html'
        };
    });

这是指令模板

<div class="item-input-wrapper">
    <i class="icon ion-search"></i>
    <input type="search" placeholder={{placeholder}} ng-model="search.value">
    <i ng-if="search.value.length > 0" ng-click="clearSearch()" class="icon ion-close-circled"></i>
</div>

由于

0 个答案:

没有答案