Question

我在问这个问题，因为我不太清楚如何将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，我可以使用rootScope吗？或者我应该在指令的控制器中使用rootScope吗？

.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数据在运行函数

中定义

 .run(function ($rootScope) {

  $rootScope.rsLabels = { 
      welcome: 'Welcome'
  };

  $rootScope.rsUser = { 
     firstName: 'Joe'
  };
});

谢谢！

Answer 1

你可以这样做：

{{$root.rsLabels.welcome}}

Answer 2

从我的实验经验来看，似乎所有$ scope最终都是从$ rootScope继承而来的，你可以访问它上面的数据而不需要它作为服务，遵循标准的javascript原型继承规则。如果您要将指令中的scope属性设置为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

Answer 3

不建议使用根范围在角度应用程序中设置和获取属性。尝试使用$ cacheFactory，因为这样你也可以在各种请求上缓存一些值。（$cacheFactory docs）

Answer 4

有时我必须使用$ 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;
    });
  };
}]);

Answer 5

在相同的问题上劳作了很长一段时间后，我认为值得注意的是在第一篇文章中忽略了一些东西。这是我的原始代码：

app.directive('countrymap', function() 
{
    return {
        link: function(scope, element, attrs) {
            scope.$watch("countryMap", function (newCountry, oldCountry) 
            {
                setTimeout( function() 
                {
                    //function body here    
                }, 100);
            })
        }
    };  
}]);

除了你是否应该使用$ rootScope这个更哲学的设计问题之外，我的代码上面有一个明显错误的东西我觉得被Mike的解决方案遗漏了 - $ 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); }) } }; }]);

Answer 6

另一种方法是创建服务并抛出该服务访问$ 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})
   }
});

如果可以，最好的方法是Mike解决方案。如果没有，请尝试我的解决方案。

Angularjs - 指令链接函数中的$ rootScope

6 个答案: