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

Question

我已经成功地通过将 url 应用到 rootScope 来使跨域 HTML 模板正常工作，我可以从 Controller 和其他 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 未定义。我在这里做错了什么明显的事情吗？

在一个工作项目中，我们尝试使用链接函数，但它根本无法很好地缩小，因此采用了 Controller 方法。

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

Answer 1

您可以在指令级别使用 Angular 的依赖注入(inject) - 因此只需将 $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 仅存在于 Controller 函数中 - 这就是它在外部未定义的原因。