AngularJS监听时间代码我看不懂，求大神解答

Question

angular.module("ezstuff",[])
.directive("ezNamecardEditor",function(){
return {
restrict : "E",
template : "

",
replace : true,
link : function(scope,element,attrs){
//获得变量名称
var model = attrs.data;

        //展开HTML模板，使用field属性标记对应字段
        element.append("<li>name : <input type='text' field='name'></li>")
            .append("<li>gender : <input type='text' field='gender'></li>")
            .append("<li>age : <input type='text' field='age'></li>");

        //监听DOM事件，变化时修改变量值
        element.find("input").on("keyup",function(ev){
            var field = ev.target.getAttribute("field");
            scope[model][field] = ev.target.value;
            //将对scope的修改进行传播
            scope.$apply("");
        });
    }
};

})
.directive("ezLogger",function(){
return {
restrict : "A",
link : function(scope,element,attrs){
var model = attrs.data;

        scope.$watch(model,function(nv){
            var cnt = JSON.stringify(nv,null,'  ');
            element.html("<pre>"+cnt+"</pre ");
        },true);
    }
};

});

<!-- 下面两个指令都绑定到变量sb上-->

ul.nceditor{
list-style:none;
padding:10px;
margin:0px;
width:300px;
border:1px solid #787878;
line-height:30px;
}

Answer 1

然后解答说：我们把ez-namecard和ez-namecard-editor都绑定到同一个sb对象上，那么在 ez-namecard-editor上进行编辑，将导致sb对象发生变化；由于ez-namecard监听了这个变化， 所以，ez-namecard的显示也应该变化。

但是我在上面的代码中没看到有ez-namecard的出现，应用到HTML中，JavaScript中的ezNamecardEditor变成了HTML中的ez-namecard-editor，可以直接这么断开么？有规则么？

还有....directive(..){...}中
return{..}中
restrict有A有E是为什么？
Link是干什么用的..

scope.$watch(model,function(nv){
var cnt = JSON.stringify(nv,null,' ');
element.html("

"+cnt+"</pre ");

        },true);

除了watch的三个参数的格式，里面的两句代码是什么意思？