1

我需要使用 $http.get 在我的控制器中获取一个 json 文件：

module.controller 'SampleMapController', ($http, $scope) ->
    $http.get('../../highcharts/mapdata/world.geo.json').
        success (data) ->
            $scope.mapData = data # works and logs out correctly

并将其传递给一个指令，该指令使用该 json 进行映射：

module.directive 'MapDirective', () ->
    require: '?SampleMapController'
    templateUrl: '../template.html'
    link: ($scope) ->
        console.log $scope.mapData # undefined
        $scope.$watch 'an.object.that.contains.more.data',
            (newValue) ->
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container div'
                    }
                    # ... use $scope.mapData somewhere in here to render the global map
                })
            true

但是我没有任何运气访问该 $scope，并且不确定我是否应该将它放在 $rootScope 上，或者事件需要控制器。

我正在生成一个高图表地图link:

我正在寻找的详细解释在抽象的JSBin中。

4

2 回答 2

2

您可以将范围传递给指令。通过scope在指令中使用 key。这是更多文档的链接：https ://docs.angularjs.org/api/ng/service/$compile#-scope-

指示

// ...
return {
    require: '?SampleMapController',
    restrcit: 'A', // Attribute
    templateUrl: '../template.html',
    scope: {
        mapData: '=' // Bidirectionnal binding with the controller scope.
    },
    link: function( scope, elm, attrs ) {
        scope.$watch( 'mapData', function(newValue) {
            console.log( newValue );
            // ...
        });
};
// ...

HTML

<!-- ... -->
<div data-map-directive data-map-data="mapData"></div>
<!-- ... -->
于 2014-06-21T00:47:15.453 回答
1

您不能在指令中注入 $scope ，而是可以在指令中的链接函数中传递范围

      your should use this : 


      link:function(scope,element,attributes){ // Notice to the function scope

         // Now you have access to the scope , and you can do whaterver you want .

       }

注意 在依赖注入哲学中，在您的控制器中，您可以将 $scope 作为依赖注入，并且$符号在 angularJS 中是已知的。另一件事是，控制器中的依赖注入不遵循任何顺序，我的意思是考虑这一点：

  app.controller('YouController',function($scope,$location,$http,...){
       // You see in the injection , I injected $scope first , but it doesn't matter , I mean I can inject $location first , and then $scope , and ...
      // So there is no order here !

     // your stuff here
  });

但是在指令中，将依赖项传递给链接函数的顺序很重要，另一方面，名称并不重要！

  app.directive('yourdirective',function(){// you cannot inject $scope here !
      return {

          link : function(scope,element,attributes){// order is important
               // anything that comes first , is scope 
               // Second is always element 
               // Third is always attributes 
               // So you could do this : 
               // function(scooooope,elem,att)
               // See I changed the names , because here names are not important , but the order is important
             }
        }
      });

编辑：清除您的代码: :(

   module.directive('MapDirective',function(){
    return{
       require: '?SampleMapController'
       templateUrl: '../template.html'
       link: function(scope){
           console.log scope.mapData 
         // Please test , if still undefiend ;
       }
      }
   })
于 2014-06-20T23:09:31.907 回答