什麼是AngularJS處理這種模式的方式

Question

我知道你不應該把你的顯示邏輯放在控制器裏面，而我正在用適當的AngularJS方式來解決這個問題。

我正在展示模態內的表單。我正在使用Zurb基金會的模式顯示。

標記：

<div class="button" ng-click="modalAddWidget">Add Widget</div> 
<div id="modalAddWidget" class="reveal-modal"> 
    <h6>New Widget</h6> 
    <form> 
    <fieldset> 
     <legend>Widget Name</legend> 
     <input type="text" ng-model="ui.add_widget_value" /> 
    </fieldset> 
    <div class="small button right" ng-click="addWidget()">Add Widget</div> 
    <div class="small button right secondary" ng-click="addWidgetCancel()">Cancel</div> 
    </form> 
</div> 

控制器：

... 
    $scope.modalAddWidget = function() { 
    $("#modalAddWidget").reveal(); 
    } 
    $scope.addWidget = function() { 
    $scope.myobject.widgets.push({"name": $scope.ui.add_widget_value}); 
    $scope.ui.add_widget_value = ''; 
    $('#modalAddWidget').trigger('reveal:close'); 
    } 
    $scope.addBudgetCancel = function() { 
    $scope.ui.add_widget_value = ''; 
    $('#modalAddWidget').trigger('reveal:close'); 
    } 
    ... 

注：$ scope.ui是我使用的存儲不應該被綁定到我的對象，直到用戶UI值的對象實際上點擊「添加小工具」

$ scope.myobj是我的數據存儲位置。

基金會的$("#modalAddWidget").reveal();函數提供了模態疊加。

因爲我不應該把我的顯示代碼放在控制器內部，所以接近它的正確方法是什麼？

Answer 1

你不想從你的控制器操縱DOM（或者甚至引用它）。

指令最好在這裏。

app.directive('revealModal', function(){ 
    return function(scope, elem, attrs) { 
    scope.$watch(attrs.revealModal, function(val) { 
     if(val) {   
      elem.trigger('reveal:open'); 
     } else { 
      elem.trigger('reveal:close'); 
     } 
    }); 
    elem.reveal(); 
    } 
}); 

然後在你的控制器：

$scope.modalAddWidget = function(){ 
    $scope.ui = { add_widget_value: '' }; 
    $scope.showModal = true; 
}; 

$scope.addWidget = function(){ 
    $scope.myobject.widgets.push({"name": $scope.ui.add_widget_value}); 
    $scope.ui.add_widget_value = ''; 
    $scope.showModal = true; 
}; 

而在你的HTML

<div class="button" ng-click="modalAddWidget()">Add Widget</div> 
<div id="modalAddWidget" class="reveal-modal" reveal-modal="showModal"> 
    <h6>New Widget</h6> 
    <form name="addWidgetForm" ng-submit="addWidget()"> 
    <fieldset> 
     <legend>Widget Name</legend> 
     <input type="text" name="widgetValue" ng-model="ui.add_widget_value" required /> 
     <span ng-show="addWidgetForm.widgetValue.$error.required">required</span> 
    </fieldset> 
    <button type="submit" class="small button right">Add Widget</button> 
    <div class="small button right secondary" ng-click="showModal = false;">Cancel</div> 
    </form> 
</div> 

基本上你設置你的範圍布爾顯示和隱藏你的模式。 （我不確定揭示模態的開啓/關閉機制，所以我在上面的代碼中猜測）。

另外：我經歷了在那裏添加驗證的工作。