AngularJS 指令对象的Scope属性

我会带着你远行 2022-06-11 04:30 184阅读 0赞

代码：

<!DOCTYPE html>
    <html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <title>Scope作用域测试</title>
        <script src="../Script/angular.min.js"></script>
        <style type="text/css">
            .frame {
                text-align:center;
                padding: 2px 8px;
                margin: 0px;
                font-size: 20px;
                width: 500px;
                background-color: #eee;
            }
    
            .tip {
                font-size: 20px;
                color: #666;
                margin: 3px 0px;
                padding: 5px 0px;
            }
        </style>
        <script type="text/ng-template" id="tpl">
            <div class="tip">
                <span>姓名：{
       {textName}}</span>
                <span>年龄：{
       {textAge}}</span>
            </div>
            <button ng-transclude></button>
        </script>
    </head>
    <body>
        <div class="frame" ng-controller="MyScope" style="text-align: center;">
            姓名：<input ng-model="text_name"
                      placeholder="请输入姓名" /><br />
            年龄：<input ng-model="text_age"
                      placeholder="请输入年龄" />
            <div class="tip">{
       {tip}}</div>
            <ts-json a-attr="{
       {text_name}}"
                     b-attr="text_age" reset="reSet()">重置</ts-json>
        </div>
        <script type="text/javascript">
            var app = angular.module('MyModule', [])
            .controller('MyScope', function ($scope) {
                $scope.reSet = function () {
                    $scope.tip = "姓名与年龄重置成功！";
                }
            })
            .directive('tsJson', function () {
                return {
                    restrict: 'EAC',
                    templateUrl: 'tpl',
                    transclude: true,
                    scope: {
                        textName: '@aAttr',
                        textAge: '=bAttr',
                        reSet: '&reset'
                    },
                    link: function (scope, iEle, iAttrs) {
                        iEle.bind('click', function () {
                            scope.$apply(function () {
                                scope.reSet();
                                scope.textName = '海哥';
                                scope.textAge = '20';
                            })
                        })
                    }
                };
            });
        </script>
    </body>
    </html>

截图：

![Center][]

![Center 1][]

[Center]: /images/20220611/70bc895d3a704431b4a707f1d980eb71.png
[Center 1]: /images/20220611/85d24595a7f544d99be06e6d2f1be887.png