製作一個簡單的指令只有模態動態

所以我是一個新角度。試圖僅使用角度指令來製作簡單的模態。製作這種情況的原因：製作一個簡單的指令只有模態動態

沒有需要使用引導
沒有需要一個控制器和

因此沒有依賴注入

 function modalTrigger() { 
      return { 
       restrict: 'A', 
       transclude: true, 
       link: function(scope, element, attrs) { 
        scope.show = false; 
        scope.toggleModal = function() { 
         console.log(scope); 
         scope.show = !scope.show; 
        }; 
       }, 
       template: '<div class="modal-trigger" ng-click="toggleModal()" ng-transclude></div>' 
      }; 
     } 

     function modalDialog() { 
       return { 
        restrict: 'E', 
        transclude: true, 
        link: function(scope, element, attrs) { 
         scope.dialogStyle = {}; 
         if (attrs.width) 
          scope.dialogStyle.width = attrs.width; 
         if (attrs.height) 
          scope.dialogStyle.height = attrs.height; 
         scope.hideModal = function() { 
          console.log("called hide modal"); 
          scope.show = false; 
         }; 
        }, 
        template: "<div class='ng-modal' ng-show='show'><div class='modal-backdrop' ng-click='hideModal()'></div><div class='container' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'><a href=''>&times;</a></div><div class='modal-content' ng-transclude></div></div></div>" 
       }; 
      }

「模式觸發」指令用於通過設置「秀」，以真正觸發「模式，對話框」指令。這裏有兩條指令

現在，如果你點擊任何觸發器，兩個模塊都會出現。我如何使觸發器專用於自己的模態？

爲了讓事情更加清楚，這裏是plunker一個例子：http://plnkr.co/edit/lNwTy3ddFFBBm2DPHUGA?p=preview

來源

2015-04-23 tanwaniniranjan

的問題是，無論是情態動詞的觀察顯示/隱藏自己相同的屬性（show）。要糾正這一點，show屬性必須限定每個模式，我提出以下幾點建議：

有一個控制器，它定義了2顯示屬性：

app.controller('Ctrl', function($scope) { 
    $scope.show1 = false; 
    $scope.show2 = false; 
});

並激活它：

<body ng-app="angularApp" ng-controller="Ctrl as ctrl">

更改模態觸發器具有隔離範圍和show屬性，如下所示：

function modalTrigger() { 
    return { 
     restrict: 'A', 
     transclude: true, 
     link: function(scope, element, attrs) { 
      scope.toggleModal = function() { 
       scope.show = !scope.show; 
      }; 
     }, 
     scope: { 
      show: '=' 
     }, 
     template: '<div class="modal-trigger" ng-click="toggleModal()" ng-transclude></div>' 
    }; 
}

使用它，例如爲：

<a href="" data-modal="modal1" modal-trigger show="ctrl.show1">Waiting List</a>

變化的模態指令以使用與show屬性分離的範圍;只需添加：
```
 scope: { 
      show: '=' 
     }, 
```
到指令。使用它作爲：
```
<modal-dialog data-modal-name="modal1" show="ctrl.show1"> 
```

分叉plunker與完整的解決方案：http://plnkr.co/edit/cJOXju9H3PMjRdUKqVCF?p=preview

來源

2015-04-23 12:21:44

輝煌的答案！但有什麼辦法可以消除控制器的使用嗎？這是因爲我會在佈局中有幾個常見的模式。所以如果我們使用控制器，我們將不得不在佈局中初始化它。此外，另一個目的是隻需編輯視圖即可創建新的模式，而無需觸摸控制器！ – tanwaniniranjan

這裏的控制器只是'show'屬性的容器。您可以將它們放在您的應用程序的任何位置，並且可以重複使用它們。如果不是'show'屬性，你會如何將模態與其觸發器聯繫起來？ –

通過觸摸視圖來創建'show'標誌的方式（在我看來很髒）是'ng-init =「showX = false」'指令。（例如[this]（http://plnkr.co/edit/IT34hBoBa04H1f4OdP6W?p=preview） - 請注意屬性** HAVE **被置於一個對象之下以便雙向綁定正常工作） –

製作一個簡單的指令只有模態動態

回答

相關問題