Question

我的指令代码（基于http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-6-using-controllers）

angular.module('myApp')
    .directive('myButton',function(){

        var controller = function () {
              var vm = this;

              console.log("label",vm.saveLabel);
        };

        return {
            replace: true,
            restrict: 'E',

            scope: {
                cancelLabel: '@',
                saveLabel: '@'
            },

            template: '<p>Label: {{vm.saveLabel}}</p>',

            controller: controller,
            controllerAs: 'vm',
            bindToController: true
        };
});

和这个html

<my-button saveLabel="Save"></my-button>

但是，saveLabel值始终未定义

我无法看到我失踪的东西。我知道这有点蠢......

Answer 1

变化

<my-button saveLabel="Save"></my-button>

as

<my-button save-label="Save"></my-button>

从AngularJs Directive documentation开始：

注意：指令范围选项中的这些=attr属性与指令名称一样被规范化。绑定到中的属性 <div bind-to-this="thing">，您指定了绑定 =bindToThis。

Answer 2

工作演示：http://plnkr.co/edit/sLtsGW0Os0jqFt070xc7?p=preview

使用它像：

<my-button save-label="Save"></my-button>
<!-- Or you can use like -->
<my-button data-save-label="Save"></my-button>
<!--But not like the following -->
<!-- <my-button savelLabel="Save"></my-button> -->

Angularjs使用规范化：

Angular规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配。我们通常通过其区分大小写的camelCase规范化名称（例如ngModel）来引用指令。但是，由于HTML不区分大小写，我们通过小写形式引用DOM中的指令，通常使用DOM元素上的划线分隔属性（例如ng-model）。

规范化过程如下：

1。从元素/属性的前面剥离x-和数据。

2. ：将：， - 或_分隔的名称转换为camelCase。

angular指令，控制器和范围属性

2 个答案: