Angular 1.X版本简单组件模版,包括$rootScope全局作用域使用

Angular 1.X版本简单组件模版,包括$rootScope全局作用域使用

最近业务开发需要,自己备忘一下,其中建议状态父子组件的公共方法注册使用$rootScope,数据传递使用scope,并且使用双向绑定'=',方便数据操作

但是这里有个很奇怪的问题,就是$scope打印会经常报错,目前主要是打印其属性或者控制台断点查看变量基本上没什么问题,怀疑是proto又是那种无限的,所以禁止打印,有待探究

CommonApp.directive("detailInfoViewAndEdit", function (HttpUtils, Notification, $filter, $rootScope) {
    return {
        replace: true,
        template: '<div ng-include="url"></div>',
        scope: {
            context: "=",
            oaType: '=',
            orderId: '=',
            oaData: '='
        },
        controller:  ($scope) => {
            $rootScope.getOaDataByOrderId = (orderId) => {
                HttpUtils.get(`oa/getOaDetail?orderId=${orderId}`, res => {
                    $scope.oaData = res.data;
                })
            }
            $rootScope.updateOaDataByOrderId = (orderId) => {
                HttpUtils.post('oa/update', {
                    ...$scope.oaData,
                    orderId
                })
            }
            $rootScope.insertOaDataByOrderId = (orderId) => {
                HttpUtils.post('oa/insert', {
                    ...$scope.oaData,
                    orderId
                })
            }
        },
        link:  ($scope, element, attr, ctrl) => {
            console.log('detailInfoViewAndEdit:', $scope.oaData);
            console.log('orderId:', $scope.orderId);
            // 获取OA参数
            if ($scope.orderId) {
                $rootScope.getOaDataByOrderId($scope.orderId);
            }

            $scope.url = "project/html/order/detail-info-view-and-edit.html" + '?_t=' + window.appversion;
        }
    }
});