Angularjs – $ rootScope中的指令链接函数
我在问这个问题，因为我不太清楚如何将rootcope作为依赖传递给指令
我有一个指令，需要显示$ rootScope的一些信息…
我以为我需要将$ rootScope传递给一个指令，但是当我写这样的指令似乎工作。
.directive("myBar", function () { return { restrict: "E", transclude: true, replace: true, template: '<div>' + '<span ng-transclude></span>' + '{{rsLabels.welcome}} {{rsUser.firstName}}!' + '</div>' } }) 我什么时候需要这样做？
.directive("myBar", function ($rootScope) { return { restrict: "E", transclude: true, replace: true, template: '<div>' + '<span ng-transclude></span>' + '{{rsLabels.welcome}} {{rsUser.firstName}}!' + '</div>' } })
我可以和如何使用rootScope，如果我需要它在指令的链接function – 或者我应该在指令的控制器中执行它？
.directive("myBar", function ($rootScope) { return { restrict: "E", transclude: true, replace: true, link: function (scope, element, attrs, rootScope) { rootScope.rsUser = { firstName: 'Joe' }; rootScope.rsUser = { welcome: 'Welcome' }; }, template: '<div>' + '<span ng-transclude></span>' + '{{rsLabels.welcome}} {{rsUser.firstName}}!' + '</div>' } })
我的rootScope数据是在运行function中定义的
.run(function ($rootScope) { $rootScope.rsLabels = { welcome: 'Welcome' }; $rootScope.rsUser = { firstName: 'Joe' }; });
谢谢！
从我的实验体验来看，由于所有的$ scopes最终都是从$ rootScopeinheritance的，所以您将能够访问其上的数据，而不需要按照标准的JavaScript原型inheritance规则来请求它。 如果您要将指令中的范围属性设置为false，或者您将发现无法再访问它。
.directive("myBar", function($rootScope) { return { restrict: "E", scope: { /* Isolate scope, no $rootScope access anymore */ }, transclude: true, replace: true, template: '<div>' + '<span ng-transclude></span>' + '{{rsLabels.welcome}} {{rsUser.firstName}}!' + '</div>' }; });
例如： http ： //jsbin.com/bequy/1/edit
你可以这样做：
{{$root.rsLabels.welcome}}
不build议使用根作用域在angular度应用程序中设置和获取属性。 尝试使用$ cacheFactory，因为这样你也可以在一些请求上caching一些值。 （ $ cacheFactory文档 ）
有时我必须使用$ scope。$ root：
app.directive('setOrdinal', function() { return { link: function($scope, $element, $attr) { var steps = $scope.$root.steps; $scope.$watch(setOrdinal, function(value) { if (value) { // steps code here } }); } }; }); app.controller('stepController', ['$scope', '$rootScope', 'GetSteps', function ($scope, $rootScope, GetSteps) { var s = $scope; var r = $rootScope; s.initialize = function(id) { GetSteps.get({id: id}, function(resp){ r.steps = resp.steps; }); }; }]);
在相同的问题上劳作了很长一段时间之后，我认为值得注意的是在第一篇文章中被忽视的东西。 这是我的原始代码：
app.directive('countrymap', function() { return { link: function(scope, element, attrs) { scope.$watch("countryMap", function (newCountry, oldCountry) { setTimeout( function() { //function body here }, 100); }) } }; }]);
除了你是否应该使用$ rootScope这个更为哲学化的devise问题之外，还有一个明显的错误，就是我的代码在Mike的解决scheme中被遗漏了 – 对$ rootScope的引用。 如果你像我一样分隔你的指令和控制器文件，你将需要修改你的代码，如下所示：
app.directive('countrymap', ['$rootScope', function($rootScope) { return { link: function(scope, element, attrs) { $rootScope.$watch("countryMap", function (newCountry, oldCountry) { setTimeout( function() { //function body here }, 100); }) } }; }]);
然而，还有一个唠叨的问题：我能不能在指令中引用$ rootScope来实现相同的目标？ 确实可以。 您需要将更改广播到$ rootScope属性中，从而有效地让所有子范围知道更改并监视指令中的更改。
控制器：
$rootScope.countryMap = 'thiscountry_map'; $rootScope.$broadcast( "countryMapChanged", $rootScope.countryMap );
指示：
app.directive('countrymapalt', [function() { return { link: function(scope, element, attrs) { scope.$on("countryMapChanged", function(event, map) { setTimeout( function() { //function body here }, 100); }) } }; }]);
另一种方法是创build一个服务并抛出该服务访问$ rootScope和其他函数。 我是这样做的，因为我的环境…
app.service('myService', function ($rootScope) { this.removeItem = function (el) { console.log('rootScope: ',$rootScope); return true; } }); app.directive('draggable', function($document,myService) { return function(scope, element, attr) { myService.removeItem({id:1}) } });
如果可以的话，最好的方法是迈克解决scheme。 如果没有，请尝试我的解决scheme
