angularjs 的指令中怎么使用$sce 服務(wù)，或者說是指令中怎么依賴注入

問題描述

我寫了一個(gè)指令但是希望可以在指令中使用$sce 和 $http 服務(wù)，我在指令的外層controller 中注入了$sce 但是在使用的時(shí)候，報(bào)錯(cuò)提示我$sce 這個(gè)服務(wù)不存在，我該怎么處理

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>

我想在指令的內(nèi)部使用$sce服務(wù)，但是報(bào)錯(cuò)，$sce未找到，怎樣在指令的內(nèi)部使用$sce

回答

編輯回答

久不遇

在directive里面注入下$sce服務(wù)試一試。controller里面注入的$sce服務(wù)，應(yīng)該不能夠傳遞到directive里面吧~
實(shí)際上不需要controller里面注入$sce，因?yàn)閏ontroller未直接調(diào)用這個(gè)服務(wù)，但是directive是直接調(diào)用的

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: 這個(gè)還沒有自己試驗(yàn)，稍后可能會(huì)上一段測試代碼

2017年7月8日 07:11