在角度指令

时间:2015-07-03 07:17:48

标签: javascript angularjs angularjs-directive angularjs-ng-repeat

我有一个指令,我将其用作选择框。我想有一个搜索字段来过滤选择框项目。我在使用ngRepeat过滤器过滤项目时遇到问题。

以下是指令模板:

<a class="{{classes}}" href="javascript:;">{{placeholder}} &nbsp; <i class="uk-icon-angle-down"></i></a>
<div class="uk-dropdown uk-dropdown-medium">
    <ul class="uk-nav uk-nav-dropdown">
        <li ng-if="search" class="dropdown-input-wrap"><input type="text" placeholder="Search" ng-model="query" class="dropdown-input"></li>
        <li ng-if="header && header.length" class="uk-nav-header">{{header}}</li>
        <li ng-repeat="i in items | filter:query"><a ng-class="{'selected': selected == i[property]}" ng-click="setVal(i)"  href="javascript:;"><i class="uk-icon uk-icon-user"></i>{{i.label}}</a></li>
    </ul>
</div>

指令JS

app.directive('lySelect', function($filter) {
return {
    retrict: 'A',
    templateUrl: 'partials/elements.select.html',
    scope: {
        items: '=',
        header: '@',
        index: '@',
        lyModel: '=?',
        placeholder: '@'
    },
    controller: ['$scope', function($scope){
        $scope.setVal = function(item){
            $scope.lyModel = item[$scope.property];
            $scope.placeholder = item[$scope.label];
            $scope.selected = item[$scope.property];
            $scope.$emit('selectChange', {handle: $scope.handle, value: item[$scope.property]});
        };
    }],
    link: function (scope, elem, attrs){
        scope.query = '';
        scope.handle = attrs.handle;
        scope.search = attrs.search || false;
        scope.classes = attrs.classes;
        scope.property = attrs.property || 'value';
        scope.label = attrs.label || 'label';
        scope.selected = attrs.selected || "";
        var ph = $filter('filter')(scope.items, {value: attrs.selected})[0];
        scope.placeholder = ph[scope.label];
    }
}
});

我这样称呼我的指示:

<li class="uk-parent" search="true" ly-select ly-model="category" header="Categories" selected="{{category}}" items="categories" handle="categoryChange" data-uk-dropdown="{mode: 'click'}"></li>

基本上,如果我将$scope.query设置为链接器中的某个内容,它会显示已过滤的列表,但在此之后,过滤器不起作用,实际上我认为它是,但视图不会更新。怎么会 ?我应该在指令内手动更新视图吗?

由于

0 个答案:

没有答案