Cách AngularJS xử lý một phương thức như thế này

Question

Tôi biết bạn không nên đặt logic hiển thị bên trong bộ điều khiển và tôi đang đấu tranh với cách AngularJS thích hợp để tiếp cận điều này.

Tôi đang trình bày biểu mẫu bên trong các phương thức. Tôi đang sử dụng tiết lộ của Zurb Foundation cho phương thức này.

Markup:

<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> 

Bộ điều khiển:

... 
    $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'); 
    } 
    ... 

Lưu ý: $ scope.ui là một đối tượng tôi đang sử dụng để lưu trữ các giá trị UI rằng không nên bị ràng buộc để đối tượng của tôi cho đến khi người sử dụng thực sự nhấp vào "Thêm tiện ích con"

$ scope.myobj là nơi dữ liệu của tôi được lưu trữ.

Chức năng của $("#modalAddWidget").reveal(); của Foundation thể hiện lớp phủ phương thức.

Vì tôi không nên đặt mã hiển thị của mình bên trong bộ điều khiển, cách thích hợp để tiếp cận điều này là gì?

Answer 1

Bạn không muốn thao tác DOM (hoặc thậm chí tham khảo nó) từ bộ điều khiển của bạn.

Chỉ thị tốt nhất ở đây.

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(); 
    } 
}); 

sau đó trong điều khiển của bạn:

$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; 
}; 

Và trong HTML của bạn

<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> 

Về cơ bản bạn muốn thiết lập một boolean trong phạm vi của bạn để hiển thị và ẩn phương thức của bạn. (Tôi không chắc chắn về cơ chế mở/đóng của modal, vì vậy tôi đoán trong mã của tôi ở trên).

CSONG: Tôi đã nỗ lực thêm một số xác thực trong đó.