Own directive

ionic-v1
1

I’ve created my own directive base on ionic directives, but I have two problems. My scope property called “vFilter” doesn’t work ( there isn’t any binding). The second problem is with creating button element in link function (devTools show me html with buttons, but I don’t see it).
Code:

angular.module('Project.UI.Elements')
.directive('listView', [function() {
    return {
        replace: true,
        restrict: 'E',
        scope: {
            vTitle: '@',
            vButtons: '=?',
            vFilter: '=',
            vRefresh: '&'
        },
        transclude: true,
        template: '<ion-view title="{{vTitle}}">' +
                        '<ion-nav-buttons side="right"></ion-nav-buttons>'+
                        '<ion-content class="has-header">' +
                            '<label class="item item-input">' +
                                '<i class="icon ion-search placeholder-icon"></i>' +
                                '<input type="text" placeholder="Search" ng-model="vFilter">' +
                            '</label>' +
                            '<ion-refresher on-refresh=vRefresh() refreshing-icon="ion-ios7-reloading" pulling-icon="ion-ios7-arrow-thin-down"></ion-refresher>' +
                            '<ion-list ng-transclude> </ion-list>' +
                        '</ion-content>' +           
                  '</ion-view>',
            
        link: function(scope, elem, attrs) {
            buttons = elem.find('ion-nav-buttons');
            angular.forEach(scope.vButtons, function (buttonDef) {
                button = angular.element('<button></button>');
                button.attr('ui-sref', buttonDef.state);
                button.addClass(buttonDef.type);
                buttons.append(button);
            });
        }
    };
}]);

vButtons attribute example:

$scope.Buttons = [{
        state : "main.clientEdit",
        type: "button button-icon icon ion-plus-round",
    }];
2

Can you put this in a codepen?

3

Here is codepen: http://codepen.io/anon/pen/qhIeD

4

Not to sure what you are trying to do with this, is it a search directive?

Have you seen this post?

5

No it isn’t only search directive. I have list with filter and I try to add dynamically buttons to header. I’ve solved problem with filter, but there is still the second one.

6

I apply this on my ng-repeat but it wont work, my array of objects is from a service which contains a long json objects array from which items are fetched for the ng-repeat.

I apply the ion search but nothing is happening, can you help please