48

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'
  };
});

ありがとうございました！

4

6 に答える 6

70

次の方法で実行できます。

{{$root.rsLabels.welcome}}
于 2014-05-28T08:32:22.857 に答える
53

私の実験\経験から、すべての $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

于 2014-02-12T19:02:44.957 に答える
7

root スコープを使用して角度アプリケーションのプロパティを設定および取得することはお勧めしません。$cacheFactory を使用してみてください。そうすることで、さまざまなリクエストに対していくつかの値をキャッシュすることもできます。( $cacheFactory ドキュメント)

于 2014-02-12T18:48:09.607 に答える
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 のソリューションから除外されたと思われる明らかに間違った点が 1 つあります。それは、$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);
            })
        }
    };  
}]);

しかし、もう 1 つ厄介な問題があります。ディレクティブで $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);
            })
        }
    };  
}]);
于 2015-08-07T01:28:48.170 に答える
1

もう 1 つの方法は、サービスを作成し、そのサービスが $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})
   }
});

可能であれば、最良の方法はマイクのソリューションです。そうでない場合は、私の解決策を試してください。

于 2016-03-21T09:28:12.720 に答える