javascript - 使用 Angular 和套接字切换 HTML 元素

Question

我尝试创建一个管理面板，通过它我可以通过套接字实时设置用户的显示。

我将它用于 Angular 、Angular Material 、NodeJS 和 Socket.io

我有一个带有复选框的后端 Controller 。当我单击 时，该值将被保存以发出 NodeJS

Controller 后端

angular.module('app')
.controller('myController', ['$scope','mySocket', function( $scope, socket ){

    $scope.activated = true;

    $scope.toggle = function(){ 
        socket.emit('activated',{ value: $scope.activated });
    }
});

模板后端

对于 html，我使用像这样的 Angular Material

<md-checkbox ng-model="activated" 
             aria-label="Checkbox 1" 
             ng-change="toggle()">
             {{ activated }}
</md-checkbox>

Controller 前端

前端 Controller 除了事件监听socket之外与上一个相同。

socket.on('activated', function( data ){

    $scope.$apply(function () {
        // here is my problem
        // the ng-if don't react when $scope.activated is changed
        $scope.activated = data.value; 
    });
});

Html 前端

<div my-service ng-if="activated"></div>

正如您所理解的，这一切的目的是启用/禁用功能(在我的例子中是一个指令)。

我的问题是，为什么在我的情况下，该指令在通过一次错误后不会重新出现。我的意思是，如果我不更改值而只保留 console.log ，一切正常吗？

谢谢

更新

问题来自 ng-if，这不是一个好方法。你还有别的主意吗？使用 ng-show，没关系，但我想真正从 DOM 中删除元素

Answer 1

您遇到范围问题。因为您在使用 ng-if 的元素上有一个指令 myService 。 ng-if 创建一个隔离的范围，这会导致问题。或者您的属性指令可以创建隔离的范围，问题是相同的。 使用 ng-show 你的问题很可能会得到解决。