Question

我的主页包含底部模板（其中包含点击事件以打开chat.html）和指示插入chat.html代码。

.....

<div ng-controller="BottomDockController">
  <!--include bottom dock partial template here-->
  <div ng-include="template.bottomdock"></div>
  <!--end of include bottom dock partial template here-->

  <!--include chat  directive  here-->
  <chat></chat>
  <!--end of include chat directive here-->
  ...

</div>

聊天指令代码是：

angular.module("bottomDock.directive", [])
.directive("chat", function () {
    return {
        restrict: 'E',
        templateUrl: '/partials/chat.html',
        link: function (scope, iElement, attrs) {
            $('#chat_selection_popup').hide();
            angular.element("#chat_close").bind("click", function() {
                $('#chat_selection_popup').hide();
            });
        }
    }
});

聊天 - 控制器

angular.module('chat.controller',[])
.controller('ChatController', ['$scope', '$http',
    function($scope, $http) {
        $scope.players = [];


           //**if remove below method along with ng-click event then I do get all players //
           $scope.showChatWindow = function () {
            $http.get("/api/players").
                success(function (data) {
                    if (data) {
                        $scope.players = data;
                    }
                });
        }

    }
]);

从template.bottomdock里面我正在使用

    <div ng-controller="ChatController">
        <div id="chat_icon" ng-click="showChatWindow()"><a><area shape="rect" coords="534,4,629,84" alt="chat"></a></div>
    </div>

聊天html

 <div class="chat_modal" id="chat_selection_popup" ng-controller="ChatController">
            <div class="gm_user_box" ng-repeat="player in players">
                <div class="gm_user_box">
                <div class="gm_usr_heading">{{player.teamname}}</div>
                <div class="gm_usr_nm pvs">{{player.player_names}}</div>
                <a><div class="gm_usr_avatar">
                  <img src="images/avatar/{{player.avatar}}" alt=""/></div></a>
            </div>

 </div>

如果我不使用onClick（）事件加载数据（通过showChatWindow（）），chat.html会正确显示所有玩家。但是如果我尝试在click事件之后加载它，那么$ scope.players就不会得到更新。我尝试了$ scope.apply，这给了我一个错误。

我不明白为什么$ scope.player没有发生双向绑定？这是由于指令吗？

Answer 1

我认为它是由于ng-repeat引起的proptype链接问题。你需要将它用作下面定义的对象。

聊天 - 控制器

        $scope.playersobj = {};

         $scope.showChatWindow = function () {
        $http.get("/api/players").
            success(function (data) {
                if (data) {
                    $scope.playersobj.players = data; //  or use this  $scope.playersobj = {"players":data};
                }
            });

聊天html

     <div class="gm_user_box" ng-repeat="player in playersobj.players">
            <div class="gm_user_box">
            <div class="gm_usr_heading">{{player.teamname}}</div>
            <div class="gm_usr_nm pvs">{{player.player_names}}</div>
            <a><div class="gm_usr_avatar">
              <img src="images/avatar/{{player.avatar}}" alt=""/></div></a>
        </div>

如果能解决您的问题，请告诉我们！

如果通过指令使用，我的范围变量不会更新

1 个答案: