如何使用angular.js在DOM周圍移動視圖？

Question

如何使用角度js將元素移動到DOM中的不同位置？

我有一個像這樣的元素列表

<ul id="list" ng-controller="ListController">
    <li ng-controller="ItemController"><div>content</div></li>
    <li ng-controller="ItemController"><div>content</div></li>
    <li ng-controller="ItemController"><div>content</div></li>
    <li ng-controller="ItemController">
        <div>content</div>
        <div id="overlay"></div>
    </li>
</ul>

我想要完成的是將#overlay從一個地方移到另一個地方而不必在我標記為隱藏/未隱藏的每個項目中都有隱藏的副本。

如果這是jquery我可以做這樣的事情：

$("#overlay").appendTo("#list li:first-child");

是否有相同的方法來做角度？

Answer 1

由於您的澄清，我可以理解您有一個項目列表。 您希望能夠在此列表中選擇一個項目（滑動但可能還有其他事件），然后為所選項目顯示其他DOM元素（div）。 如果選擇了其他項目，則應該取消選中 - 這樣只有一個項目應該顯示另一個div。

如果上述理解是正確的，那么您可以使用這樣的簡單ng-repeat和ng-show指令來解決這個問題：

<ul ng-controller="ListController">
    <li ng-repeat="item in items">
        <div ng-click="open(item)">{{item.content}}</div>
        <div ng-show="isOpen(item)">overlay: tweet, share, pin</div>
    </li>
</ul>

控制器中的代碼所在的位置（僅顯示其片段）：

$scope.open = function(item){
    if ($scope.isOpen(item)){
        $scope.opened = undefined;
    } else {
        $scope.opened = item;
    }        
};

$scope.isOpen = function(item){
    return $scope.opened === item;
};

這是完整的jsFiddle： http ： //jsfiddle.net/pkozlowski_opensource/65Cxv/7/

如果您擔心有太多的DOM元素，可以使用ng-switch指令實現相同的功能：

<ul ng-controller="ListController">
    <li ng-repeat="item in items">
        <div ng-click="open(item)">{{item.content}}</div>
        <ng-switch on="isOpen(item)">
            <div ng-switch-when="true">overlay: tweet, share, pin</div>
        </ng-switch>        
    </li>
</ul>

這是jsFiddle： http ： //jsfiddle.net/pkozlowski_opensource/bBtH3/2/

Answer 2

作為讀者（我）的練習，我想嘗試一個自定義指令來實現這一目標。 這是我想出的（經過多次嘗試失敗后）：

<ul ng-controller="ListController">
    <li ng-repeat="item in items">
        <div singleton-overlay>{{item.content}}</div>
    </li>
</ul>

如果存在，則需要服務來存儲當前具有疊加層的元素。 （我決定不使用控制器，因為我認為'service + directive'會產生比'controller + directive'更可重用的組件。）

service('singletonOverlayService', function() {
    this.overlayElement = undefined;
})

指令：

directive('singletonOverlay', function(singletonOverlayService) {
    return {
        link: function(scope, element, attrs) {
            element.bind('click', moveOrToggleOverlay);

            function moveOrToggleOverlay() {
                if (singletonOverlayService.overlayElement === element) {
                    angular.element(element.children()).remove();
                    singletonOverlayService.overlayElement = undefined;
                } else {
                    if (singletonOverlayService.overlayElement != undefined) {
                        // this is a bit odd... modifying DOM elsewhere
                        angular.element(singletonOverlayService.overlayElement.children()).remove();
                    }
                    element.append('<div>overlay: tweet, share, pin</div>')
                    singletonOverlayService.overlayElement = element;

jsFiddle： http ： //jsfiddle.net/mrajcok/ya4De/

我認為實現有點不同尋常，但是...指令不僅修改了與其自身元素相關聯的DOM，而且還可以修改與當前具有覆蓋的元素相關聯的DOM。

我嘗試在示波器上設置$ watch並使用單例存儲並修改范圍對象，但是當我從moveOrToggleOverlay函數內部更改范圍時，我無法觸發$ watches。