javascript - 显示空选项卡的指令

Question

我想在我的应用中实现指令，但我什至不能从最简单的开始。谁能告诉我为什么？

JS:

angular
        .module('app.admin.catalog.nutritional_facts')
        .directive('nutritionalInfo', nutritionalInfo);

function nutritionalInfo(){

    return{
        restrict: 'E',
        scope: {
            quantity: '=',
            unit: '='
        },
        template: "<div> Hello world {{ '{{quantity.qty}} {{unit.u}}' }}</div>"  
    };
}

HTML:

 <nutritional-info quantity="{qty:4}" unit="{u:'g'}"></nutritional-info>

我是 Angular 的新手，所以这可能是有史以来最简单的问题。它只显示空标签，甚至不显示 Hello world。我已经尝试将整数、字符串和对象作为属性发送。

Answer 1

我已经如下所示更正了您的代码，以使您的指令按预期工作: Working Fiddle

我的改变:

1. 将指令名称更正为驼峰式大小写
2. 更正了 html 中的 Angular 绑定(bind)
3. 更正了传递给指令的对象语法。

HTML :

<nutritional-info quantity="{qty:4}" unit="{u:'g'}"></nutritional-info>

Controller :

angular.module('app.admin.catalog.nutritional_facts', [])
    .directive('nutritionalInfo', nutritionalInfo);

function nutritionalInfo(){

 return{
    restrict: 'E',
    scope: {
        quantity: '=',
        unit: '='
    },
    template: "<div> Hello world {{quantity.qty}} {{unit.u}}</div>"  
 };
}