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

您的代码似乎在您的dom中工作:)，只需更改即可 <personName> 到<person-name>：）

Answer 2

HTML中的 personName 应该是 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

限制：＆＃39; E＆＃39;不管用

2 个答案: