How to access $rootScope variable from directive templateUrl

问题

I've managed to get cross-domain HTML templates working by applying a url to the rootScope which I can access from controllers and other HTML files, but the problem arises when it comes to accessing the template from a directive. Here's my directive code:

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"
    };
});

When attempting this I get: ReferenceError: $rootScope is not defined. Is there something blatantly obvious that I'm doing wrong here?

In a work project we tried using the link function but that didn't play nicely with being minified at all, hence the controller approach.

Any help would be greatly appreciated! Thanks.

回答1:

You can use angular's dependency injection at directive level - so just place $rootScope there. See my example below:

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'
    };
  }]);

As Joe Clay said, $rootScope exists only in the controller function - that's why it's undefined outside of it.

回答2:

$rootScope has fallen out of scope by the time you try to access it in templateUrl - you can't use a function parameter outside of the function (or at least, not without saving a reference somewhere)!

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

        $scope.toggleShowSection = function() {
            $scope.tglShowSection = !$scope.tglShowSection;
        };
    } // FUNCTION ENDS HERE - past this point $rootScope is undefined!
];

EDIT: While this answer gives some context on why your current code doesn't work, I wasn't 100% sure of the best way to solve the problem - Cosmin Ababei's answer seems like an effective solution, and I'd recommend you follow his advice!

来源：https://stackoverflow.com/questions/36007277/how-to-access-rootscope-variable-from-directive-templateurl

标签

javascript

angularjs

angularjs-directive