Angular ng show 不会在范围更新时更新

Question

我正在设置一个 <button> 来打开聊天 window。

聊天 window 有一个 ng-show 取决于 scope.openChat 是 false 开始。当我单击按钮时，我将 scope.openChat 更新为 true 并使用 $scope.apply。范围似乎已更新，但 ng-show 没有执行任何操作。

这里是html

<div ng-controller="MessagesCtrl">
    <button start-chat>Send Messages</button>
</div>

和

<div ng-show="openChat" ng-controller="MessagesCtrl">
    <div>CHAT WINDOW
    </div>
</div>

这里是控制器：

app.controller("MessagesCtrl", function MessagesCtrl($scope,Auth) {
    $scope.openChat = false;
    $scope.message = { recipient : undefined, sender: undefined, text:'text'};
});

这是按钮的指令：

'use strict';
app.directive('startChat',[ 'Post', 'Auth', function (Post, Auth) {
    return {
        restrict: 'A',
        replace: true,
        bindToController: true,
        controller: 'MessagesCtrl',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                scope.$apply(function() {
                    scope.openChat = true;
                    scope.message.recipient = scope.profile.$id;
                    scope.message.sender = Auth.resolveUser().uid;
                });
            });
        }
    }
}]);

谢谢

Answer 1

我建议不要创建 MessagesCtrl 的两个实例。这是您要解决的问题的简化工作示例。检查标记，发现 MessagesCtrl 包含这两个元素。否则，您在正确的轨道上更新 $scope 并调用 $apply

另请注意，.on() 是 .bind() 的首选方法，请参阅 jQuery docs

JSFiddle Link

<div ng-app="app">
    <div ng-controller="MessagesCtrl">
        <button start-chat>Send Messages</button>
        <div class="chatWindow" ng-show="openChat"></div>
    </div>
</div>

app.directive('startChat', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function() {
                scope.$apply(function() {
                    scope.openChat = true;
                });
             });
        }
    }
}]);

app.controller('MessagesCtrl', ['$scope', function($scope) {
    $scope.openChat = false;
    $scope.message = { recipient : undefined, sender: undefined, text:'text'};
}]);

Angular ng show 不会在范围更新时更新

Angular ng show does not update while the scope does

html

javascript

angularjs

angularjs-directive

angularjs-scope

JSFiddle Link