directive does not work in the ons-toolbar

Question

I use Angularjs and OnsenUI and define a directive like this:

 module.directive('selectDIY',function(){
return{
    restrict: 'AE',
    template: "<select class=\"portNameList\" id=\"portfoliosId\"  ng-change=\"selectedPortfolioChanged( $index)\">"
                +"<option ng-repeat=\"portfolio in portfoliosPriceList track by $index\" value=\"{{portfolio.id}}\" >"
                +"{{portfolio.portname}}</option> </select>"
}

})

In the html like this:

 <ons-page ng-controller="portfoliosController">
    <ons-toolbar class="DCF"  fixed-style>
        <div class="center" style="font-size:22px;" >
           <selectDIY></selectDIY>
        </div>
        <div class="right" ng-click="myNavigator.pushPage('createPortName.html',  { animation : 'slide'});" style="font-size:22px;color:white;padding-right:10px;margin-top:12px;" ><i class="fa fa-plus"></i></div>
    </ons-toolbar>     

Anybody knows how to this?

Answer 1

If you name your directive selectDIY, you must refer to it by <select-d-i-y>, for example, in the DOM.

Or, if you want to refer to it by <selectDIY> in the DOM, you must define it as following. module.directive('selectdiy',function(){});

From the documentation:

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

The normalization process is as follows:

• Strip x- and data- from the front of the element/attributes.
• Convert the :, -, or _-delimited name to camelCase.