AngularJS学习笔记二

            <
            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="~/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>