<div ng-app="app">    <div ng-controller="demoCtrl">        <hello toname="elic" hi>这是指令中原来的内容</hello>        <div hello toname="elic">这是指令中原来的内容</div>        <div class="hello" toname="elic">这是指令中原来的内容</div>    </div></div>

<script src="http://www.mamicode.com/~/Scripts/angular.js"></script><script type="text/javascript">    var app = angular.module("app", []);    app.directive("hello", function () {        return {            restrict: "ACE",            template: ‘<div>Hello,How are you? <span ng-transclude>此内容被原指令中内容覆盖</span></div>‘,            transclude: false,   //将原指令中间的内容嵌入到template中有“ng-transclude”指令的html中            //为false时，丢失原指令中内容，模版中内容正常显示            controller: function ($scope) {                $scope.userName = "";                this.say = function () {                    alert("hello指令调用：" + $scope.userName);                }                this.setName = function (name) {                    $scope.userName = name;                }            },            link: function (scope, element, attrs) {    //参数顺序不可乱，但名称可自定义                var userName = attrs.toname;    //标签中定义的属性为“toName”，但此处取属性也要全部使用小写                //scope.sayHello(userName);     //调用作用域中的方法                scope.$apply();         //第一次调用会报“$apply already in progress”错误，不知道原因……                scope.$apply("sayHello(‘" + userName + "‘)");   //第二次调用成功                //element为angular包装集                element.bind("click", function () {                    alert(userName);                });            }        };    });    app.directive("hi", function () {        return {            require: "^hello",  //依赖于“hello”指令            //通过第四个参数，自动注入“hello”指令中的controller，名字可自定义            link: function (scope, element, attrs, helloCtrl) {                helloCtrl.setName("demo");                helloCtrl.say();            }        };    });    app.controller("demoCtrl", function ($scope) {        $scope.sayHello = function (userName) {            alert("Hello," + userName);        }    });</script>