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

Question

我问这个问题是因为我不太清楚如何将 rootscope 视为传递给指令的依赖项

我有一个指令需要显示来自 $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，我可以以及如何使用它 - 还是应该在指令的控制器中使用它？

.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 函数中定义的

 .run(function ($rootScope) {

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

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

谢谢！

Answer 1

不建议使用根范围来设置和获取 Angular 应用程序中的属性。尝试使用 $cacheFactory，因为这样您还可以在各种请求中缓存一些值。 ($cacheFactory docs)

Answer 2

根据我的实验\经验，似乎由于所有 $scopes 最终都从 $rootScope 继承，您将能够访问其上的数据，而无需将其作为服务请求，遵循标准的 javascript 原型继承规则。如果您将指令中的范围属性设置为 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

你可以这样做：

{{$root.rsLabels.welcome}}

Answer 4

在同一个问题上苦苦思索了很长一段时间后，我认为值得注意的是在第一篇文章中被忽略的一些内容。这是我的原始代码：

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 5

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

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

Answer 6

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