如何使用服務啓動模態（指令）

我是Angular的新手。不知道我在這裏失去了什麼以及從哪裏開始尋找。如何使用服務啓動模態（指令）

我需要在我的應用程序中重複使用（Twitter Bootstrap）模式對話框。我看過Angular UI，但我想自己構建它們 - 也能夠理解它是如何工作的。

我：

筆者認爲：

<div cng-modal title="Create new user" submit="saveNewUser()"> 
    <div ng-include=" 'templates/newUserForm.html' "></div> 
</div>

我的指令：

UserManagerApp.directive('cngModal', function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     transclude: true, 
     scope: { 
      title: '@title', 
      submit: '&' 
     }, 
     templateUrl: 'templates/modal.html', 
     controller: function($scope, $element, $attrs, $location) { 
      $scope.submitHandler = function() { 
       $scope.submit(); 
      }; 
     }, 
     link: function (scope, element, attrs) { 
      console.log(element); 
     } 
    }; 
});

我modal.html模板：

<div id="newUserModal" class="modal hide" data-backdrop="static" tabindex="-1"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">×</button> 
    <h3>{{ title }}</h3> 
    </div> 

    <div class="modal-body" ng-transclude></div> 

    <div class="modal-footer"> 
    <div class="btn-group"> 
     <button type="button" class="btn btn-primary btn-action btn-submit" ng-click="submitHandler()"><i class="icon-ok"></i> Save</button> 
     <button type="button" class="btn btn-action btn-cancel" data-dismiss="modal"><i class="icon-remove"></i> Cancel</button> 
    </div> 
    </div>

最後（的一部分）我的控制器：

UserManagerApp.controller('UserManagerCtrl', ['$scope', 'ajaxService', '$route', function($scope, ajaxService, $route) { 
    $scope.showNewUserModal = function() { 
     $('#newUserModal').modal('show'); 
    }; 

    $scope.saveNewUser = function() { 
     console.log('saving user'); 
    }; 
}]);

問題

現在我在我的模式打開，因爲我已經在modal.html並賦予它的ID「newUserModal」我控制器showNewUserModal（）通過其ID觸發該模式。

我想要一個服務，我可以從我的控制器中調用，根據我的指令構造一個新的模態並打開它。無需分配任何ID。 ....這怎麼可能？

感謝您指點我正確的方向。

來源

2014-02-14 maze

既然你談到了ui-bootstrap。我們在那裏有一個很好的$模態（如果你不想使用，不用），但要了解我們是如何做到的。 –

在ui-bootstrap的$ modal中，我們做了5件這樣的事情（當然你可以很簡單）。

我們有一個stackMap來堆疊我們的對話框（可以有多個）。

然後我們有一個背景指令和模態本身的指令。

我們有一個工廠，將準備一個新的模態，即獲取它的模板，解決它已經解決，創建一個控制器，如果需要的話，一個新的範圍......當我們說準備好了，我們用另一個工廠（這是好事，有每一個目的工廠），將通過手工創建一個新的背景和型號，如：

var angularDomEl = angular.element('<div modal-window></div>'); 
angularDomEl.attr('window-class', modal.windowClass); 
angularDomEl.attr('index', openedWindows.length() - 1); 
angularDomEl.attr('animate', 'animate'); 
angularDomEl.html(modal.content); 
var modalDomEl = $compile(angularDomEl)(modal.scope);

然後，我們只是需要將其追加到身體。

所以這個想法是有一個工廠，將手工創建元素並配置它，然後將它附加到正文。

我強烈建議您深入閱讀$ modal並瞭解我們在那裏做了什麼。

來源

2014-02-14 12:02:10

如何使用服務啓動模態（指令）

回答

相關問題