Question

我有以下代码。我正在尝试将name范围内的myController范围中的myObj作为nameAttr属性注入。

我已在指令的范围内分配name: '=nameAttr'，但它似乎无法正常工作。

我做错了什么？

https://plnkr.co/edit/qceVMl0w2gv03ZuQVQb8?p=preview

HTML

<my-obj nameAttr="name"></my-obj>

INSIDE THE＆＃39; MY-OBJ.HTML＆＃39;

<h2>{{ name }}</h2>
<ol>
  <li ng-repeat="(slug, val) in loop">{{ slug }} - {{ val }}</li>
</ol>

角

var mod = angular.module('myApp', []);

mod.controller('myController', myController).directive('myObj', myObject);

function myController($scope){
  $scope.name = 'John Smith';
}

function myObject(){
  return {
    restrict: 'E',
    templateUrl: 'my-obj.html',
    scope: {
      name: '=nameAttr'
    },
    controller: function($scope){
      $scope.loop = {
        'one': 'gfshfh',
        'two': '32435'
      };
    }
  };
}

Answer 1

在index.html中你需要写

<my-obj name-attr="name"></my-obj>

------------------ ^

带有Directives名称的

camelCase必须在您的模板中写为camel-case

Answer 2

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

规范化过程如下：
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.

指令文件here

如何在指令中获取属性参数

2 个答案: