JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="MyApp">
    <div class="container" ng-controller="MyController">
        <div class="my-info">我的名字是：<span ng-bind="name"></span>

            <br/>我的年龄是：<span ng-bind="age"></span>
            <br />
        </div>
        <div class="my-directive" my-directive my-name="{{name}}" age="200"  change-my-age="changeAge()"></div>
    </div>
</div>

CSS

div {
    padding: 6px;
}
div.container {
    border: 1px solid black;
}
div.my-info {
    border: 1px solid blue;
}
div.my-directive {
    border: 1px solid pink;
}

JavaScript

angular.module("MyApp", [])
    .controller("MyController", function ($scope) {
    $scope.name = "dreamapple";
    $scope.age = 20;
    $scope.changeAge = function(){
        $scope.age = 0;
    }
})
    .directive("myDirective", function () {
    var obj = {
        restrict: "AE",
        scope: {
            name: '@myName',
            age: '=',
            changeAge: '&changeMyAge'
        },
        replace: true,
        template: "<div class='my-directive'>" +
            "<h3>下面部分是我们创建的指令生成的</h3>" +
            "我的名字是：<span ng-bind='name'></span><br/>" +
            "我的年龄是：<span ng-bind='age'></span><br/>" +
            "在这里修改名字：<input type='text' ng-model='name'><br/>" +
            "<button ng-click='changeAge()'>修改年龄</button>" +
            " </div>"
    }
    return obj;
});