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

我通过将url应用到根范围（我可以从控制器和其他HTML文件访问根范围），成功地获得了跨域HTML模板，但当涉及到从指令访问模板时，问题就出现了。这是我的指令代码：

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未定义

。是否有明显的事情表明我做错了

在一个工作项目中，我们尝试使用link函数，但这并不能很好地实现缩小，因此采用了controller方法

---

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

在您尝试在

templateUrl

中访问它时已超出范围-您不能在函数外部使用函数参数（或者至少在不保存引用的情况下）

---

编辑：虽然这个答案给出了当前代码不起作用的原因，但我不是100%确定解决问题的最佳方法-Cosmin Ababei的答案似乎是一个有效的解决方案，我建议您遵循他的建议

$rootScope

在您尝试在

templateUrl

中访问它时已超出范围-您不能在函数外部使用函数参数（或者至少，在不保存引用的情况下）

---

编辑：虽然这个答案给出了当前代码不起作用的原因，但我不是100%确定解决问题的最佳方法-Cosmin Ababei的答案似乎是一个有效的解决方案，我建议您遵循他的建议

您可以在指令级使用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

只存在于控制器函数中-这就是为什么它在控制器函数之外没有定义。

您可以在指令级别使用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

只存在于控制器函数中，这就是为什么它在控制器函数之外没有定义。

这很有道理，谢谢！当我下一次做这个项目时，我会试一试，让你知道它是如何进行的。这很有道理，谢谢！我会在下一次做这个项目时试一试，并让你知道进展如何。