JSFiddle - React, Tailwind, and code Playground

by dameleon

HTML

<div ng-app="sample">
    <div hoge>
        <div hoge-child></div>
    </div>
</div>

JavaScript

var module = angular.module('sample', []);

module.directive('hoge', function() {
    return {
        restrict: 'A',
        transclude: true,
        // $scope.count を表示する
        template: '<div>hoge: {{ count }}<div ng-transclude></div></div>',
        controller: function($scope) {
            $scope.count = 0;
            // add という API をこの controller に作る
            this.add = function() { $scope.count++; };
        }
    };
});

module.directive('hogeChild', function() {
    return {
        restrict: 'A',
        template: '<button ng-click="addByChild()">hoge-child add</button>',
        // 親要素を探索するので ^ を指定
        require: '^hoge',
        link: function($scope, $element, $attrs, hogeController) {
            $scope.addByChild = function() {
                // hogeController の add を呼ぶ
                hogeController.add();
            };
        }
    };
});