指令在 ons-toolbar 中不起作用

Question

我使用 Angularjs 和 OnsenUI 并定义如下指令：

 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>"
}

})

在html中是这样的：

 <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>

有人知道怎么做吗？

Answer 1

如果您将指令命名为 selectDIY，则必须通过 <select-d-i-y> 引用它，例如，在 DOM 中。

或者，如果你想在DOM中用<selectDIY>引用它，你必须定义如下。 module.directive('selectdiy',function(){});

来自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.

指令在 ons-toolbar 中不起作用

directive does not work in the ons-toolbar

angularjs

onsen-ui