AngularJs directive&controll

之前讲到directive自定义指令，但是实际上单纯创建指令是没什么卵用的。减少开发成本，需要使用控制器与自己制作的指令交互。

<div ng-app=“App” ng-controller=“Ctrl ”>

    <—自定义一个指令—>

    <test testdata=“{{data}}”></test>

</div>

<script>

var app=angular.module(“App”,[]);

    app.controller(“Ctrl”function(){

          $scope.data=“测试数据”;

    });

    app.directive(“test”,function(){

            return{

              restrict:”AE”,

              template:”<div>{{dirdata}}</div>”,

              link:function(scope,element,attrs){

          scope.dirdata=attrs.testdata     

              }

            }   

    });

</script>

结果输出：测试数据

说明：我看了一个晚上才发现。原来directive的数据表达方式与controller所赋值的数据的表达根本都不同。很有趣，自定义两个指令之后（一个A一个E），$sope居然可以直接访问自定义的标签和属性。

这里的原理是这样的，

1.定义test指令，以属性的方式创建数据容器。

2.通过controller来给原来的容器存放数据

3.实例化test和data指令，创建一个模版，用于以普通html元素渲染数据。

4.因为无法直接用test标签渲染数据。所以，初始化好了的数据都需要放到模版中渲染。所以接下来就需要将指令中的数据赋值到模版中（使用directive配置项的“link”函数）

注：link函数：这个函数用于定义指令的行为，（仅限于指令内部）