扩展隐藏元素

所以我的问题是，如何在遍历AngularJS中的数组的同时创建可展开的树。我的意思是我可以让它工作，他们一起扩大/关闭的问题。扩展隐藏元素

我的html：

[...] 
<div ng-repeat="item in items"> 
    <div class="item-title" ng-click="setState()">{{ item.title }}</div> 
    <div class="item-container" show-me="isShown"> 
     {{ item.content }} 
    </div> 
</div>

我的JS：

[...] 
//in controller: 

$scope.isshown = false; 
$scope.setState = function() { 
    $scope.isshown = !$scope.isshown; 
}; 
[...] 
.directive("showMe", function($animate) { 
    return function (scope, element, attrs) { 
     scope.$watch(attrs.showMe, function(newVal) { 
      if(newVal) { 
       $animate.addClass(element, 'show');    
      } else { 
       $animate.removeClass(element,'show'); 
      } 
     }); 
    }; 
});

所以这basicly打开每一个项目。我正在寻找3天的解决方案，我真的不想用$（div＃blabla）-s做出特别长的jquery thingies。有任何想法吗？

来源

2014-09-24 Tyekx

您可以修改您的指令，使用分离范围：

.directive("showMe", function($animate) { 
    return { 
     scope: {}, 
     link: function (scope, element, attrs) { 
      scope.showMe = false; 
      scope.$watch('showMe', function(newVal) { 
       if(newVal) { 
        $animate.addClass(element, 'show');    
       } else { 
        $animate.removeClass(element,'show'); 
       } 
      }); 
     } 
    }; 
});

- 编辑答案在下面的意见问题 -

要访问你的指令外的分离范围可以使用角元素。使用JavaScript来获取使用document.getElementById，document.getElementsByClassName，document.querySelector等节点。一旦你有你想要的元素做以下。

var node = document.getElementById('MyElement'); 
var el = angular.element(node); 
var scope = el.scope(); 
scope.showMe = false;

或者你可以创建一个监听器来控制它的价值你的指令，这样的内部：

.directive("showMe", function($animate) { 
    return { 
     scope: {}, 
     link: function (scope, element, attrs) { 
      scope.showMe = false; 

      element.bind('click', function(e) { 
       e.preventDefault(); 
       scope.$apply(function() { 
        scope.showMe = !scope.showMe; 
       }); 
      }); 

      scope.$watch('showMe', function(newVal) { 
       if(newVal) { 
        $animate.addClass(element, 'show');    
       } else { 
        $animate.removeClass(element,'show'); 
       } 
      }); 
     } 
    }; 
});

来源

2014-09-24 20:49:30 James

你将如何从指令外修改该隔离范围的'showMe'这样你就可以控制其状态？ – Zenorbi 2014-09-24 20:52:20

好问题，我会修改答案来证明这一点。 – James 2014-09-24 20:53:51

你可以这样做：

<div ng-repeat="item in items"> 
    <div class="item-title" ng-click="item.isShown = !item.isShown">{{ item.title }}</div> 
    <div class="item-container" ng-show="item.isShown"> 
     {{ item.content }} 
    </div> 
</div>

你不需要任何额外的JavaScript代码。

来源

2014-09-24 20:45:10

范围在指令的所有实例中共享，因此每个showMe都检查相同的isshown变量。一个简单的解决办法是修改你这样的代码：

<div ng-repeat="item in items"> 
    <div class="item-title" ng-click="setState(item)">{{ item.title }}</div> 
    <div class="item-container" show-me="isShown(item)"> 
     {{ item.content }} 
    </div> 
</div>

和Controller：

$scope.setState = function(item) { 
    item.isshown = !item.isshown; 
}; 
$scope.isShown = function(item) { 
    return item.isshown; 
};

在这里，您使用的项目作为数据源，以及对象持有的状态“开放性”。该指令的手表将调用控制器中的isShown函数，在那里您将提取该项目的状态。可选地，你可以在其他地方使用数组，其中每个显示的项存储在其中（并且当然在隐藏时移除），并且isShown只检查数组是否具有该项。

来源

2014-09-24 20:45:57 Zenorbi

扩展隐藏元素

回答

相关问题