JSFiddle - React, Tailwind, and code Playground

by dream apple

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>

        </div>
        <div class="my-directive" my-directive></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 green;
}

JavaScript

angular.module("MyApp", [])
    .controller("MyController", function ($scope) {
    $scope.name = "dreamapple";
    $scope.age = 20;
    $scope.changeAge = function () {
        $scope.name = 22;
    }
})
    .directive("myDirective", function () {
    var obj = {
        restrict: "AE",
        scope: true,
        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'>"+
            " </div>"
    }
    return obj;
});