Как получить доступ к переменной $ rootScope из директивы templateUrl

Question

Мне удалось получить междоменные шаблоны HTML, применяя URL-адрес rootScope, доступ к которому я могу получить из контроллеров и других файлов 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 is not defined. Есть что-то явно очевидное, что я здесь делаю неправильно?

В рабочем проекте мы попытались использовать функцию связи, но это не очень хорошо сыграло с миниатюрами вообще, поэтому подход к контроллеру.

Любая помощь была бы принята с благодарностью! Благодарю.

Answer 1

Вы можете использовать угловую инъекцию зависимости на уровне директивы - так что просто разместите там $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' 
    }; 
    }]); 

Как сказал Джо Клей, $rootScope существует только в функции контроллера - вот почему это не определено за его пределами.

Answer 2

$rootScope вышел из-под контроля к моменту попытки доступа к нему в templateUrl - вы не можете использовать параметр функции вне функции (или, по крайней мере, не сохраняя ссылку где-нибудь)!

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: Хотя этот ответ дает некоторый контекст на почему ваш текущий код не работает, я не был 100% уверен, что лучший способ решить проблему - ответ Cosmin Ababei, кажется, как эффективное решение, и я бы рекомендовал вам следовать его совету!