angularjs 的指令中怎么使用$sce 服务，或者说是指令中怎么依赖注入

Question

问题描述

我写了一个指令但是希望可以在指令中使用$sce 和 $http 服务，我在指令的外层controller 中注入了$sce 但是在使用的时候，报错提示我$sce 这个服务不存在，我该怎么处理

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>

我想在指令的内部使用$sce服务，但是报错，$sce未找到，怎样在指令的内部使用$sce

Answer 1

在directive里面注入下$sce服务试一试。controller里面注入的$sce服务，应该不能够传递到directive里面吧~
实际上不需要controller里面注入$sce，因为controller未直接调用这个服务，但是directive是直接调用的

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: 这个还没有自己试验，稍后可能会上一段测试代码