[提高总结二]指令中的$transclude服务

柔情只为你懂 2022-07-12 13:09 95阅读 0赞

<!DOCTYPE html>
    <html lang="en" ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
        <script src="vendor/angular/angular.js"></script>
    </head>
    <body>
    <test-directive1 url="http://www.baidu.com">打开百度</test-directive1>
    <div test-directive2 url="http://www.baidu.com">打开百度2</div>
    </body>
    
    <script>
        /**目的是练习下directive中的controller和$transclude参数
         * 1,controller:可以是一个字符串或者函数。
         *              若为字符串，则将字符串当做控制器的名字，来查找注册在应用中的控制器的构造函数
         * 2,指令中的controller可以注册使用与元素相关的特殊服务：
         *   $scope 与指令元素相关联的作用域
         *   $element 当前指令对应的元素
         *   $attrs 当前元素的属性组成的对象
         *   $transclude  $transclude($scope, function(clone) {}) 嵌入链接函数，实际被执行用来克隆元素和操作DOM中的函数
         *
         *   注意：$transclude只有指令的dir.transclude为true或object的时候，才能使用。
         * */
        var app = angular.module("app", []);
        app.directive("testDirective1", function () {
            var dir = {};
            dir.transclude = true;
            dir.replace = true;
            dir.controller = ["$scope", "$element", "$attrs", "$transclude", function ($scope, $element, $attrs, $transclude) {
                $transclude(function (clone) {
                    var a = angular.element("<a>");
                    a.attr("href", $attrs["url"]);
                    a.text(clone.text());
                    $element.append(a);
                });
            }];
            return dir;
        });
        app.controller("ctr2", ["$scope", "$element", "$attrs", "$transclude", function ($scope, $element, $attrs, $transclude) {
            $transclude(function (clone) {
                var a = angular.element("<a>");
                a.attr("href", $attrs["url"]);
                a.text(clone.text());
                $element.append(a);
            });
        }]);
        app.directive("testDirective2", function () {
            var dir = {};
            dir.transclude = {};
            dir.replace = true;
            dir.controller = "ctr2";
            return dir;
        });
    </script>
    </html>

参考：https://segmentfault.com/a/1190000005851663