擴展隱藏元素

所以我的問題是，如何在遍歷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

擴展隱藏元素

回答

相關問題