18

AngularJS にシンプルなアプリがあります。AJAX リクエストが行われたときにメッセージを動的に表示したい。残念ながら、常に非表示の状態であり、その理由がわかりません。

HTML:

<div ng-show="message">
    <h2>show</h2>
</div>

<div ng-hide="!message">
    <h2>Hide</h2>
</div>

AngularJS コントローラー:

function merchantListController($scope, $http, $rootScope, $location, global) {
    $http({
        method: 'POST',
        url: global.base_url + '/merchant/list',
    }).success(function($data) {
        if ($data.status === 'success') {
            $scope.merchants = $data.data;

            $scope.$apply(function(){
                $scope.message = true;
            });
        }
    });
}

スクリーンショット

4

7 に答える 7

23

機能していない理由として考えられるのは、予想どおり MerchantListController のスコープ内のプロパティを上書きするのではなく、子スコープ内に新しいmessageスコープ プロパティを作成しているためです。

// The following assignment will create a 'message' variable 
// in the child scope which is a copy of the scope variable   
// in parent scope - effectively breaking two-way model binding.
$scope.message = true;

これを解決するには、スコープのプロパティではなく、モデルのプロパティへの参照によってバインドするようにしてください。

HTML

<div ng-show="my.message">
   <h2>show</h2>
</div>

<div ng-hide="!my.message">
   <h2>Hide</h2>
</div>

コントローラ

function merchantListController($scope, $http, $rootScope, $location, global) {

   // Initialize my model - this is important!
   $scope.my = { message: false };

   $http({
        method: 'POST',
        url: global.base_url + '/merchant/list',
    }).success(function($data) {

        if ($data.status === 'success') {
            $scope.merchants = $data.data;

            // modify the 'message' property on the model
            $scope.my.message   = true;
        }

    });
});

説明

これが機能する理由は、モデルmyがスコープ継承ルールを使用して解決されているためです。つまりmy、現在のスコープに存在しない場合myは、見つかるまで親スコープで検索するか、$rootScope で検索を停止します。モデルが見つかると、messageプロパティは上書きされます。

于 2014-07-26T12:05:19.397 に答える
9

表示/非表示のロジックが間違っています...次のように変更します: ng-hide="message"

    <div ng-show="message">
       <h2>show</h2>
    </div>

   <div ng-hide="message">
       <h2>Hide</h2>
   </div>

ng-hide はいつ非表示にするか変数が必要で、 ng-show はいつ表示するかが必要なので、条件ng-show="message" と ng-hide="!message"は同じです。

これを試してください：

    <div ng-show="message">
       <h2>show</h2>
    </div>

   <div ng-show="!message">
       <h2>Hide</h2>
   </div>

テスト用に... http クラスを次のように変更します。

$http({
    method: 'POST',
    url: global.base_url + '/merchant/list',
}).success(function($data) {

            $scope.message   = true;
    }).error(function($data) {
            $scope.message   = false;
    });
于 2014-07-26T08:54:05.427 に答える
1 
Because you did a mistake...

ng-show="message" and ng-hide="!message" both points to the same value..

Correct it as..
<div **ng-show="message"**>
    <h2>show</h2>
</div>

<div **ng-hide="message"**>
    <h2>Hide</h2>
</div>

//or you can do in your way as...

<div **ng-show="message"**>
    <h2>show</h2>
</div>

<div **ng-show="!message"**>
    <h2>Hide</h2>
</div
于 2016-06-09T11:04:58.530 に答える
0

まず、$scope.$apply() の呼び出しは不要です。

show div が表示されない場合は、それ$scope.message = true;が実行されていないことを意味します。実行されない場合は、AJAX リクエストが成功していないか、それ$data.status === 'success'が正しくないことを意味します。

コードをデバッグするか、console.log() トレースを追加して変数の値を調べ、何が実行され、何が実行されていないかを確認します。標準的なデバッグ作業。

また、データ変数の前に $ を付けないでください。$ は通常、angular が提供するサービス用に予約されています。

于 2014-07-26T08:54:27.090 に答える
-2

そのすべては必要ありません。$scope.$parent.$message = true を実行するだけです。前のコメントが言うように、あなたは子スコープにいて、元のバインディングは親スコープ変数を使用しているためです。しかし、その愚かな言語は、親変数と子変数の両方に共通の記憶を持っていないと思います。それは私にとってはうまくいき、ng-controllerについて言及する必要はありませんでした。なんてクレイジーな言語で、私はこれのために 1 日を無駄にしました。しかし、すべての貴重なフィードバックに感謝します。

于 2016-08-10T15:19:38.223 に答える