AngularJS - Mẫu chỉ thị/dịch vụ/điều khiển CRUD

Question

Tôi muốn tạo một số chỉ thị tương tác với bộ điều khiển/phạm vi cha mẹ theo một số cách. Tôi làm CRUD theo 2 cách: A) Tuyến đường dựa vào nơi bạn chuẩn bị chỉnh sửa mục Tôi sử dụng $ location để thay đổi url thành url đã cho B) Cùng trang dựa vào nơi bạn nhấp vào chỉnh sửa trên mục mà nó đặt $ scope.template từ $ scope.tpl, sau đó trong phần tôi có một ng-hide/show ẩn và hiển thị khung nhìn bảng/chi tiết.

Điều tôi muốn đạt được là có thể có ít mã trong chỉ thị của mình và có thể sử dụng cách tiếp cận hoặc gợi ý dựa trên dịch vụ hơn?

Chỉ

'use strict'; 

/* Directives */ 
var directives = angular.module("app.directives", ["ui"]); 


function CrudCtrl($scope, $attrs, $location, $parse) { 
    function getScope(scopeName) { 
     scopeName = typeof scopeName || "$parent"; 
     var ngModel = $parse(scopeName, $scope); 
     return ngModel($scope) 
    } 

    function refreshObjects(scopeName) { 
     $scope.svc.query($scope.params, function(objects) { 
      var parentScope = getScope(scopeName) 
      parentScope.objects = objects 
     }); 
    } 

    if (!$scope.refreshObjects) { 
     $scope.refreshObjects = function() { 
      refreshObjects($attrs.modelname) 
     } 
    } 

    if (!$scope.crudAdd) { 
     $scope.crudAdd = function() { 
      if ($attrs.url) { 
       $location.path($attrs.url); 
       return; 
      } else { 
       var parentScope = getScope($attrs.scope); 
       parentScope.object = new $scope.svc(); 
       parentScope.template = parentScope.tpl; 
      } 
     } 
    } 

    if (!$scope.crudDelete) { 
     $scope.crudDelete = function() { 
      /* Fire off a delete and as a callback we update objects */ 
      $scope.svc.delete({accountId: $scope.account.uuid, id: $scope.object.id}, function() { 
       refreshObjects($attrs.scopeName) 
      }); 
     }; 
    } 

    if (!$scope.crudEdit) { 
     $scope.crudEdit = function() { 
      if ($attrs.url) { 
       $location.path($attrs.url); 
       return; 
      } else { 
       var parentScope = getScope($attrs.scopeName); 
       parentScope.object = $scope.object; 
       parentScope.template = parentScope.tpl; 
      } 
     }; 
    } 

    if (!$scope.crudSave) { 
     $scope.crudSave = function() { 
      var params = {} 
      params.accountId = $scope.params.accountId 
      if ($scope.object.id) { params.id = $scope.object.id } 

      $scope.object.$save(params, function() { 
       if ($attrs.url) { 
        $scope.back(); 
       } else { 
        refreshObjects($attrs.scopeName); 

        var parentScope = getScope($attrs.scopeName); 
        parentScope.template = undefined; 
       } 
      }); 
     }; 
    } 

    if (!$scope.crudCancel) { 
     $scope.crudCancel = function() { 
      if (parentScope.template) { 
       var parentScope = getScope($attrs.scopeName); 
       parentScope.template = undefined; 
      } else { 
       $scope.back(); 
      } 
     }; 
    }; 
}; 


directives.directive("refresh", function() { 
    return { 
     restrict: "E", 
     replace: true, 
     controller: CrudCtrl, 
     scope: true, 
     link: function(scope, element, attrs) { 
      scope.display_text = attrs.text; 
     }, 
     template: '<button class="btn btn-mini btn-primary" ng-click="refreshObjects()"><i class="icon-refresh"></i> Refresh</button>', 
    }; 
}); 


/* Create something new */ 
directives.directive("create", function() { 
    return { 
     restrict: "E", 
     replace: true, 
     controller: CrudCtrl, 
     scope: true, 
     link: function(scope, element, attrs) { 
      scope.display_text = attrs.text; 
     }, 
     template: '<button class="btn btn-mini btn-success" ng-click="crudAdd()"><i class="icon-plus"></i> {{display_text || "Add"}}</button>', 
    }; 
}); 


/* Delete button and update objects */ 
directives.directive("delete", function() { 
    return { 
     restrict: "E", 
     replace: true, 
     controller: CrudCtrl, 
     scope: true, 
     link: function(scope, element, attrs) { 
      scope.display_text = attrs.text; 
     }, 
     template: '<button class="btn btn-mini btn-danger" ng-click="crudDelete()"><i class="icon-remove icon-white"></i> {{display_text}}</button>', 
    } 
}); 

/* Helper to create a edit button */ 
directives.directive("edit", function() { 
    return { 
     restrict: "E", 
     replace: true, 
     controller: CrudCtrl, 
     scope: true, 
     link: function(scope, element, attrs) { 
      scope.display_text = attrs.text; 
     }, 
     template: '<button class="btn btn-mini btn-info" ng-click="crudEdit()"><i class="icon-edit"></i> {{display_text || "Edit"}}</a>', 
    } 
}); 

/* Save the object and return to the previous page */ 
directives.directive("save", function() { 
    return { 
     restrict: "E", 
     replace: true, 
     controller: CrudCtrl, 
     scope: true, 
     link: function(scope, element, attrs) { 
      scope.display_text = attrs.text; 
     }, 
     template: '<button class="btn btn-success" ng-click="crudSave()"><i class="icon-ok"> {{display_text || "Save"}}</i></a>', 
    }; 
}); 

/* Cancel the current action */ 
directives.directive("cancel", function() { 
    return { 
     restrict: "E", 
     replace: true, 
     controller: CrudCtrl, 
     scope: true, 
     link: function(scope, element, attrs) { 
      scope.display_text = attrs.text; 
     }, 
     template: '<button class="btn" ng-click="crudCancel()"><i class="icon-remove"></i> {{display_text || "Cancel"}}</button>' 
    } 
}); 

Một ví dụ điều khiển

function BookingCtrl($scope, Booking) { 
     $scope.svc = Booking; 
     $scope.objects = $scope.svc.query($scope.params); 
    } 

Sau đó, trong một phần cho một cái nhìn tổng quan tôi có:

<div ng-hide="template"> 
<refresh></refresh> 
<create url="/{{params.accountId}}/entity/add"></create> 

<table class="table table-condensed table-hover"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Name</th> 
      <th>Description</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="object in objects"> 
      <td> 
       <delete></delete> 
       <edit url="/{{params.accountId}}/category/{{object.resource_id}}"></edit> 
      </td> 
      <td>{{object.resource_name}}</td> 
      <td>{{object.description}}</td> 
     </tr> 
     </tr> 
     </tr> 
    </tbody> 
</table> 
</div> 

<ng-show="template" ng-include src="template"></ng-show> 

Các chi tiết phần:

<div class="span4"> 
    <h3>Category: {{category.resource_name}}</h3> 
    <form name="detail_form" class="form-horizontal"> 
     <div class="control-group"> 
      <label class="control-label"><strong>Name</strong></label> 
      <div class="controls"> 
       <input required ng-model="object.resource_name" placeholder="Name" type="text" class="input-small"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label"><strong>Description</strong></label> 
      <div class="controls"> 
       <textarea ng-model="object.description" placeholder="Description" type="textarea" rows=5></textarea> 
      </div> 
     </div> 
     <div class="control-group"> 
      <save scope-name="$parent.$parent"></save> 
      <cancel scope-name="$parent.$parent"></cancel> 
     </div> 
    </form> 
<pre>form = {{object | json}}</pre> 
</div> 

Điều này có vẻ quá mức khi sử dụng $ parent. $ Parent nếu có cách nào tốt hơn để giải quyết vấn đề này, hãy giúp tôi!

Answer 1

tôi sẽ tiếp cận loại tính năng làm sau:

• đặt $resource vào hoạt động.
• sử dụng ng-view để liên kết các url và partials. Sử dụng neo để liên kết đến các phần khác.
• xác định bộ điều khiển cho từng bộ phận phụ thuộc vào vai trò của chúng. (truy cập $resource qua dịch vụ)

http://angularjs.org/#wire-up-a-backend có thể là ví dụ.