javascript - 如何从指令templateUrl访问$ rootScope变量

我已经设法通过将URL应用于rootScope来使跨域HTML模板正常工作，我可以从控制器和其他HTML文件访问该URL，但是从指令访问模板时会出现问题。这是我的指令代码：

angular.module("bertha")
    .directive("bthToggleHeader", function() {
    var controller = [
        "$scope", "$rootScope", "_", function ($scope, $rootScope, _) {
            if ($scope.tglOpen)
                $scope.tglShowSection = true;

            $scope.toggleShowSection = function() {
                $scope.tglShowSection = !$scope.tglShowSection;
            };
        }
    ];

    return {
        restrict: "E",
        scope: {
            tglHeading: "@",
            tglShowSection: "=",
            tglOpen: "=?"
        },
        transclude: true,
        controller: controller,
        templateUrl: $rootScope.cdnUrl +  "/html/directives/bthToggleHeader.html"
    };
});

尝试此操作时，我得到：ReferenceError: $rootScope is not defined。有什么明显的证据表明我在这里做错了吗？

在一个工作项目中，我们尝试使用链接功能，但是在最小化方面并不能很好地发挥作用，因此采用了控制器方法。

任何帮助将不胜感激！谢谢。

最佳答案

您可以在指令级别使用angular的依赖项注入-只需在其中放置$rootScope即可。请参阅下面的示例：

angular
  .module('bertha')
  .directive('bthToggleHeader', ['$rootScope', function($rootScope) {
    var controller = [
      '$scope', '_',
      function($scope, _) {
        if ($scope.tglOpen)
          $scope.tglShowSection = true;

        $scope.toggleShowSection = function() {
          $scope.tglShowSection = !$scope.tglShowSection;
        };
      }
    ];

    return {
      restrict: 'E',
      scope: {
        tglHeading: '@',
        tglShowSection: '=',
        tglOpen: '=?'
      },
      transclude: true,
      controller: controller,
      templateUrl: $rootScope.cdnUrl + '/html/directives/bthToggleHeader.html'
    };
  }]);

正如Joe Clay所说，$rootScope仅存在于控制器函数中-这就是为什么它在其外部未定义的原因。

关于javascript - 如何从指令templateUrl访问$ rootScope变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36007277/