指令繼承和互操作性

Angular js 指令可以巢狀或可互操作。

在這個例子中，指令 Adir 向指令 Bdir 公開它的控制器$ scope，因為 Bdir 需要 Adir。

angular.module('myApp',[]).directive('Adir', function () {
        return {
            restrict: 'AE',
            controller: ['$scope', function ($scope) {
                    $scope.logFn = function (val) {
                            console.log(val);
                        }
                  }]
            }
    })

確保設定 require：’^ Adir’（檢視角度文件，某些版本不需要^字元）。

.directive('Bdir', function () {
        return {
            restrict: 'AE',
            require: '^Adir', // Bdir require Adir
            link: function (scope, elem, attr, Parent) { 
            // Parent is Adir but can be an array of required directives.
                elem.on('click', function ($event) {
                    Parent.logFn("Hello!"); // will log "Hello! at parent dir scope
                    scope.$apply(); // apply to parent scope.
                });
            }
        }
    }]);

你可以通過以下方式巢狀指令：

<div a-dir><span b-dir></span></div>
<a-dir><b-dir></b-dir> </a-dir>

不要求指令巢狀在 HTML 中。