1

AngularJS を使用していますが、この問題を解決する方法が見つかりません:

私のコントローラーの一部があります：

$scope.$on('showMoreNotifications', function (event) {
    $.ajax({
        url: '/notifications',
        data: {
            notificationCount: 30
        },
        success: function (e) {
            $scope.notifications = e.Messages;
        }
    });
});

そして、これがこのコントローラーを使用するhtmlです：

<div class="widget" id="widget-notifications" ng-controller="NotificationsCtrl">
    <span class="title" ng-click="$parent.$broadcast('showMoreNotifications')">@*showMoreNotifications()*@
        Notifikace
    </span>
    <div class="messages">
        <div ng-repeat="item in notifications" class="message-item type-{{item.Entity}}" data-id="{{item.AuditLogId}}">
            <span class="type"></span>
            <div class="description">
                <span class="date">{{item.Date}}</span> / {{item.Message}}
            </div>
        </div>
    </div>
</div>

上部のスパン クラス タイトルをクリックすると、コントローラーがサーバーを正しく呼び出し、JSON データを受信します。残念ながら、それに関連付けられている html を更新しないでください。2 回目にクリックすると、html は最初のリクエストからデータを更新します。

4

2 に答える 2

6

jQueryを使用してxhr呼び出しを行っているため、テンプレートは更新されていません。これらの呼び出しは「AngularJSの外部」の世界と見なされるため、AngularJSはそれらを認識せず、自動更新サイクルを開始する必要があることを認識していません。

AngularJSの優れた$httpサービスを使用してxhr呼び出しを行う方がはるかに優れています。あなたは次のように書くでしょう：

$http('/notifications', {params : {
            notificationCount: 30
        }}).success(function (e) {
            $scope.notifications = e.Messages;
        });

答えがjQueryの$.ajaxからAngularJS$httpへの移行に役立つ同様の質問がありました：https ：//stackoverflow.com/a/12131912/1418796

次に、直接関係のないものですが、イベントに反応するためにイベントをブロードキャストする必要はありませんclick。次のように書くだけで十分です。

<span class="title" ng-click="myClickHandler()">
@*showMoreNotifications()*@
        Notifikace
</span>

次に、コントローラーで：

$scope.myClickHandler = function(){
  //call $http here
}
于 2012-12-11T17:06:17.547 に答える
1

今、私は私の問題を解決しました...スコープに適用する必要があります

このような：

$.ajax({
    url: Escudo.UrlHelper.baseUrl + 'Widgets/Notifications/GetLastNotifications',
    data: {
        notificationCount: 30
    },
    success: function (e) {
        $scope.$apply(function () {
            $scope.notifications = e.Messages;
        });
    }
});
于 2012-12-11T16:59:06.663 に答える