10

私のルートスコープにはvisible、divの可視性を制御するプロパティがあります

app.run(function ($rootScope) {
    $rootScope.visible = false;
});

HTMLの例：

<section ng-controller='oneCtrl'>
    <button ng-click='toggle()'>toggle</button>
    <div ng-show='visible'>
        <button ng-click='toggle()'>&times;</button>
    </div>
</section>

コントローラ：

var oneCtrl = function($scope){
    $scope.toggle = function () {
        $scope.visible = !$scope.visible;
    };
}

上記のセクションは正常に機能し、要素は問題なく表示または非表示になります。別のセクションの同じページで、visible変数を変更してdivを表示しようとしましたが、機能しません。

<section ng-controller='otherCtrl'>
    <button ng-click='showDiv()'>show</button>
</section>

コントローラ：

var otherCtrl = function($scope){
    $scope.showDiv = function () {
        $scope.visible = true;
    };
}
4

2 に答える 2

24

AngularJSでは、$scopesは通常、親スコープからからまで継承し$rootScopeます。JavaScriptでは、子がプリミティブ型を変更すると、プリミティブ型が上書きされます。$scope.visibleそのため、コントローラーの1つを設定すると、onのプロパティは変更されず、現在のスコープに$rootScope新しいプロパティが追加されました。visible

AngularJSでは、スコープのモデル値は常に「ドット」である必要があります。つまり、プリミティブではなくオブジェクトです。

ただし、次を挿入することでケースを解決することもできます$rootScope。

var otherCtrl = function($scope, $rootScope){
  $scope.showDiv = function () {
    $rootScope.visible = true;
  };
}
于 2013-02-27T19:57:01.633 に答える
1

$ scopeの概念にどの程度精通していますか？あなたのコードに基づいて、2つの異なるスコープで「visible」と呼ばれる2つの別々の$scope変数を維持しているように見えます。各コントローラーには独自のスコープがありますか？これはよくあることです。この場合、さまざまなコントローラーで$ scope.visible = trueを実行すると、両方とも「visible」という名前のさまざまな変数を実際に編集します。

可視が本当にルートスコープにある場合は、$scope.visibleの代わりに$rootScope.visibleを実行できますが、これはやや面倒です。

1つのオプションは、ディレクティブにその「otherCtrl」コードセクションを含めることです（おそらくこれを行う必要があります）。次に、ディレクティブスコープを親スコープに双方向バインドします。これはここで確認できます。このようにして、ディレクティブとページコントローラーの両方が同じスコープオブジェクトを使用します。

$ scopeをより適切にデバッグするには、Batarangと呼ばれるAngular用のChromeプラグインを試してください。これにより、適切な場所を探しているだけでなく、実際にすべてのスコープをトラバースして、モデルがレイアウトされていることを確認できます。

于 2013-02-27T19:58:24.187 に答える