1. 首頁
  2. 問答
  3. 如何使用Angular指令顯示對話框？

如何使用Angular指令顯示對話框？

2013-12-03 72 views
0

使用Angular，我試圖創建一個指令，將放置在一個將啓動搜索對話框的按鈕上。有多個搜索按鈕的實例，但顯然我只想要一個對話框的實例。該對話框應該使用模板URL構建並具有自己的控制器，但是當用戶選擇一個項目時，該指令將用於設置值。如何使用Angular指令顯示對話框？

關於如何使用自己的控制器從指令創建對話框的任何想法？

這裏就是我走這麼遠（基本上就是指令）...

http://plnkr.co/edit/W9CHO7pfIo9d7KDe3wH6?p=preview

這裏是從上面plkr的HTML ...

<a href="" my-find="setPerson">Find</a>

這裏從上面的plkr的代碼...

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    var person = {}; 
    person.name = 'World'; 
    $scope.person = person; 

    $scope.setPerson = function(newPerson) { 
    person = newPerson; 
    $scope.person = person; 
    } 
}); 

app.directive('myFind', function() { 

    var $dlg; // holds the reference to the dialog. Only 1 per app. 

    return { 
     restrict: 'A', 
     link: function (scope, el, attrs) { 

      if (!$dlg) { 
       //todo: create the dialog from a template. 
       $dlg = true; 
      } 

      el.bind('click', function() { 

       //todo: use the dialog box to search. 

       // This is just test data to show what I'm trying to accomplish. 
       alert('Find Person'); 
       var foundPerson = {}; 
       foundPerson.name = 'Brian'; 
       scope.$apply(function() { 
        scope[attrs.myFind](foundPerson); 
       }); 

      }); 
     } 
    } 
})

這是據我所知。我無法弄清楚如何在指令中使用模板創建對話框，因此它只出現一次，然後爲其分配一個控制器。我想我可以在模板中分配控制器，但首先我需要弄清楚如何加載模板並調用我們自定義的jQuery插件來生成對話框（我們有自己的對話框樣式&）。

所以我相信問題是，如何在指令中加載模板？但是，如果對這個問題有不同的思考方式，我也會對此感興趣。

來源

2013-12-03 Brian

回答

1

我會告訴你如何使用bootstrap-ui來做到這一點。 （如果它不適合您的需求，您可以輕鬆修改它）。

這裏是模板的骨架。你通常可以綁定到上指示的範圍內的任何屬性和功能：

<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      ... // e.g. <div class="button" ng-click=cancel()></div> 
     </div> 
     <div class="modal-body"> 
      ... 
     </div> 
     <div class="modal-footer"> 
      ... 
     </div> 
    </div> 
</div>

這裏是如何創建/你的模塊中聲明指令：

.directive("searchDialog", function ($modal) { 

     return { 

      controller: SearchDialogCtrl, 

      scope : { 
       searchDialog: '=' // here you will set two-way data bind with a property from the parent scope 
      }, 

      link: function (scope, element, attrs) { 

       element.on("click", function (event) { // when button is clicked we show the dialog 
        scope.modalInstance = $modal.open({ 
         templateUrl: 'views/search.dialog.tpl.html', 
         scope: scope // this will pass the isoleted scope of search-dialog to the angular-ui modal 
        }); 
        scope.$apply(); 
       }); 
      } 
     } 
    });

然後控制器可能看起來類似的東西：

function SearchDialogCtrl(dep1, dep2) { 

    $scope.cancel = function() { 
     $scope.modalInstance.close(); // the same instance that was created in element.on('click',...) 
    } 

    // you can call it from the template: search.dialog.tpl.html 
    $scope.someFunction = function() { ... } 

    // it can bind to it in the search.dialog.tpl.html 
    $scope.someProperty; 

    ... 

    // this will be two-way bound with some property from the parent field (look below) 
    // if you want to perform some action on it just use $scope.$watch 
    $scope.searchDialog; 
}

然後你加價，你可以只使用它這樣：

<div class="buttonClass" search-dialog="myFieldFromScope">search</div>

來源

2013-12-03 20:30:50

相關問題

 相關問題