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世界。我已经尝试将int，字符串和对象作为属性发送。

Answer 1

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

我的更改：

将指令名称更正为驼峰案例
更正了html中的角度绑定
更正了传递给指令的对象语法。

HTML：

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

控制器：

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

Answer 2

你有几个问题：

NutritionalInfo应为nutritionalInfo（camelCase）。这就是Angular将该指令与<nutritional-info> HTML标记相关联的知识。见Directive Normalization。
您没有正确地将对象传递给指令。 quantity="{qty=4}"应为quantity="{qty: 4}"。
您未在模板中正确评估表达式。 {{ '{{quantity.qty}} {{unit.u}}' }}可以只是{{quantity.q}} {{unit.u}}。 Angular expressions被解释为在当前范围上运行的JavaScript代码。因此，您甚至可以构建{{quantity.q.toFixed(1) + ' ' + unit.u.toUpperCase()}}之类的表达式（生成4.0 G）。

通过所有这些修复，这里是working fiddle。

Answer 3

以下是我的完整解决方案：

<!doctype html>
<html lang="en" ng-app="app.admin.catalog.nutritional_facts">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body >

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

<script
        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>

<script>

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

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


</script>
</body>
</html>

指令显示空标签

3 个答案: