How to use the $sce service in the instruction of angularjs, or how to rely on injection in the instruction

problem description

I wrote an instruction but wanted to use the $sce and $http services in the instruction. I injected $sce into the outer controller of the instruction, but when using it, I reported an error and informed me that the $sce service did not exist. What should I do with it

var app = angular.module("app", ["ngSanitize","homeModule"]);
var home = angular.module("homeModule",[]);
home.controller("homeCtrl", ["$scope","$sce", function ($scope, $sce) {
    $scope.dataValue = {value:"<h1>hello world</h1>"}
}]);
home.directive("test", function () {
        var div = `<div id="test">
            <span ng-bind-html="title">
            </span>
        </div>`;
        function linkCtrl() {
            return function ($scope, element, ctrl) {
                if (!$scope.data) {
                    return;
                }
                
                $scope.title = $sce.trustAsHtml($scope.value);
            }
        }
        return {
            restrict: "EA",
            template: div,
            scope: {
                data: "=",
            },
            link: linkCtrl()
        }
    })
    
    html:
      <div ng-controller="homeCtrl">
          <test data="dataValue"></test>
      </div>

I want to use the $sce service inside the instruction, but I reported an error. $sce can"t be found. How to use $sce inside the instruction

Apr.01,2021

try injecting $sce service into directive. The $sce service injected into controller should not be passed to directive.
actually does not need to inject $sce, into controller because controller does not call this service directly, but directive is called directly

.
var app = angular.module('app', ['ngSanitize','homeModule']);
var home = angular.module('homeModule',[]);
home.controller('homeCtrl', ['$scope', function ($scope) {
    $scope.dataValue = {value:'<h1>hello world</h1>'}
}]);
home.directive('test', ['$sce', function ($sce) {
        var div = `<div id="test">
            <span ng-bind-html="title">
            </span>
        </div>`;
        function linkCtrl() {
            return function ($scope, element, ctrl) {
                if (!$scope.data) {
                    return;
                }
                
                $scope.title = $sce.trustAsHtml($scope.value);
            }
        }
        return {
            restrict: 'EA',
            template: div,
            scope: {
                data: '=',
            },
            link: linkCtrl()
        }
    }])
    
    html:
      <div ng-controller="homeCtrl">
          <test data="dataValue"></test>
      </div>

btw: has not been tried on its own yet, and there may be a previous test code

later.
Menu