Javascript ng如果在创建子作用域时断开网格

我用Pacery构建了一个网格，我需要根据某些条件向网格中的每个元素添加两个类。我使用ng if添加它们，效果很好，但每当我这样做时，网格都不会加载。我相信这与ng if正在创建的子范围有关，但我不知道这方面的工作是什么

HTML:

指令：

angular.module('board.directives', [])

  .directive('packeryGrid', ['$rootScope', '$window', function ($rootScope, $window) {
    return {
      restrict: 'A',

      link: function (scope, element, attrs) {

        angular.element(document).ready(function () {

          scope.$watch('board', function () {
            $rootScope.packery = new Packery(element[0], {
              itemSelector: '.itemSelector',
              columnWidth: '.columnWidth',
              rowHeight: '.rowHeight',
              gutter: '.gutter'
            });

          });

        });
      }
    };
  }])

  .directive('draggable', ['$rootScope', 'api', function ($rootScope, api) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        var draggable = new Draggabilly(element[0]);
        $rootScope.packery.bindDraggabillyEvents(draggable);
        $rootScope.packery.layout();
      }
    };
  }])

  .directive('starable', ['$rootScope', 'api', function ($rootScope, api) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.bind('dblclick', function () {
          element.toggleClass('itemSelectorBig');
          api.board().one('starred-shot', attrs.id).put();
          $rootScope.packery.layout();
        });

      }
    }
  }]);

完整代码：

---

谢谢

问题在于，您不应该依赖于某个标记是否为您创建了范围

不要使用activeUser，因为它不合格

相反，你需要把它放在某个对象中，比如

$scope.something = {};
$scope.something.activeUser = ....

然后，当您引用它时，您可以使用

{{ something.activeUser }} 

或

---

没有任何人破坏变量的危险。

使用

ng show

ng show

不会像

ng if

那样创建子作用域ng show的问题是它打破了网格，但方式不同。如果ng按照预期的方式工作，你有什么想法可以让它工作吗？你能写一个如何实现这一点的例子吗？非常感谢您的回答。在我的回答中，它应该是不言自明的。我为此更改了它：

$scope.smt.activeUser=true

然后：

ng if=“{{smt.activeUser}”draggable starable

但是结果仍然是一样的，不知道您的plunkr是否工作，但首先创建对象（请参见答案），您的if不应该是！（不是）smt.activeUser？是的，这就是我构建它的方式。这一定是真的。不管怎么说，它都应该起作用。。

$scope.something = {};
$scope.something.activeUser = ....

{{ something.activeUser }} 

ng-if="!something.activeUser"