<script src="https://code.angularjs.org/angular-1.0.1.min.js"></script>

​

  <div ng-app="MyApp">

    <div class="container" ng-controller="MyController">

        <div class="my-info">我的名字是1：<span ng-bind="name"></span>

        <!-- 使用"ng-bind"防止网络状态不佳时出现没有被赋值表达式   -->

            <br/>我的年龄是2：<span ng-bind="age"></span>

​

        </div>

        <!-- 使用属性声明指令 -->

        <div class="my-directive" my-directive></div>

    </div>

</div>

angular.module("MyApp", [])

    .controller("MyController", function ($scope) {

        //J1 这里我们在作用域里初始化两个变量

    $scope.name = "dreamapple";

    $scope.age = 20;

        //J2 创建一个方法，修改我们创建的对象的年龄

    $scope.changeAge = function () {

        $scope.age = 22;

    }

})

        //J3 创建我们的指令，指令名字为"myDirective"

​

    .directive("myDirective", function () {

    var obj = {

        //J4   指令的声明模式为 "AE" 属性和元素

        restrict: "AE",

        //J5   指令继承父作用域的属性和方法

        scope: false,

        replace: true,

        template: "<div class='my-directive'>" +

            "<h3>下面部分是我们创建的指令生成的</h3>" +

            "我的名字是：<span ng-bind='name'></span><br/>" +

            "我的年龄是：<span ng-bind='age'></span><br/>" +

            "<input type='text' ng-model='name'>"+

            " </div>"

    }

    return obj;

});

div{

    padding: 6px;

}

div.container {

    border: 1px solid black;

}

div.my-info {

    border: 1px solid blue;

}

div.my-directive{

    border: 1px solid green;

}