指令在ons工具栏中不起作用

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，则必须在DOM中用<select-d-i-y>引用它。

或者，如果您想在DOM中通过<selectDIY>引用它，则必须按以下方式定义它。module.directive('selectdiy',function(){});

来自文件：

Angular规范化元素的标记和属性名称以确定哪些元素与哪些指令匹配。我们通常指按区分大小写的camelCase规范化名称（例如。ngModel）。但是，由于HTML不区分大小写，我们参考DOM中使用小写形式的指令，通常使用DOM元素（例如ng模型）上的以破折号分隔的属性。

标准化过程如下：

• 从元素/属性的前面剥离x-和data-
• 将以:、-或_分隔的名称转换为camelCase