限制：'E' 不工作

Question

这是我第一次尝试编写指令.....我尽力了。

index.html

<!doctype html>
<html lang="en" ng-app="APP">
     <head>
          <meta charset="utf-8">
          <title>Custom Directive</title>     
     </head>
     <body>

          <personName fname="Debditya" lname="Dasgupta"></personName>



     <script src="bower_components/angular/angular.min.js"></script>
     <script src="app.js"></script>
     </body>
</html>

app.js

var APP = angular.module('APP',[]);
APP.directive('personName',function() {
     return{
          restrict:"E",
          link:function(scope,element,attrib){
               scope.fullName = attrib.fname + " "+ attrib.lname;
               console.log(scope.fullName);
          },
          replace:true,
          template:"<h1>{{fullName}}</h1>"
     }
});

我的问题是该指令未呈现任何内容。为什么指令无法正确呈现？

Answer 1

personName 在你的 HTML 中应该是 person-name，来自 Angular 文档：

The normalization process is as follows:

1- Strip x- and data- from the front of the element/attributes.
2- Convert the :, -, or _-delimited name to camelCase.

有关详细信息，请参阅 Normalization

Answer 2

您的代码在您的 dom 中似乎有效 :) 只需更改 <personName> 至 <person-name> :)

限制：'E' 不工作

restrict: 'E' is not working

directive

angularjs