AngelsJSコントローラ用のデザインパターンは、HTMLの 'parameter'を使用しています

Question

私はAngularJSを初めて使用しています.C/C++でプログラミングしていましたので、新しいAngulaJSの世界で少し失われてしまいました。

私は、メニュー項目を持つ表を表示するための情報を保持するDefMenuItemの情報を持っています。テーブルと

kinAngularApp.controller('kinServiceNumF32Controller', [function() { 
    var self = this; 
    var menuItemProperty = "menuItemsNumF32"; 
    self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]); 

    self.refresh = function() { 
     self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]); 
     refreshServicePage(); 
    } 
    self.save = function() { 
     saveObjectItemListValues(DefMenuItem[menuItemProperty], self.objectItemList); 
    } 
}]); 

kinAngularApp.controller('kinOverviewNumU32Controller',[ function() { 
    var self = this; 

    var menuItemProperty = "menuItemsNumU32"; 
    self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]); 

    self.refresh = function() { 
     self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]); 
     refreshOverviewPage(); 
    } 
    self.save = function() { 
     saveObjectItemListValues(DefMenuItem[menuItemProperty], self.objectItemList); 
    } 
}]); 

にリストの1をリンクする

var DefMenuItem = 
{ 
    "menuItemsNumF32": [ 
    { 
     "kind": "Num", 
     "obj": "eDefRegKinDriverMidObjItemIdHumWaterHardness", 
     "msg": "eDefGuiMsgIdNumWaterHardness", 
     "opt": null, 
     "hide": null 
    }, 
    { 
     "kind": "Num", 
     "obj": "eDefRegKinDriverMidObjItemIdHumKeepWarmOffset", 
     "msg": "eDefGuiMsgIdNumKeepWarmOffset", 
     "opt": null, 
     "hide": null 
    }, 
    { 
     "kind": "Num", 
     "obj": "eDefRegKinDriverMidObjItemIdHumFlickerCorrection", 
     "msg": "eDefGuiMsgIdNumFlickerCorrection", 
     "opt": null, 
     "hide": null 
    } 
    ], 
    "menuItemsNumU32": [ 
    { 
     "kind": "Num", 
     "obj": "eDefRegKinDriverMidObjItemIdHumKeepWarmTimeStart", 
     "msg": "eDefGuiMsgIdNumKeepWarmTimeStart", 
     "opt": null, 
     "hide": null 
    }, 
    { 
     "kind": "Num", 
     "obj": "eDefRegKinDriverMidObjItemIdHumKeepWarmTimeEnd", 
     "msg": "eDefGuiMsgIdNumKeepWarmTimeEnd", 
     "opt": null, 
     "hide": null 
    }, 
    { 
    "kind": "Num", 
    "obj": "eDefRegKinDriverMidObjItemIdBathDuration", 
    "msg": "eDefGuiMsgIdNumBathDuration", 
    "opt": null, 
    "hide": null 
    } 
] 
} 

そして2 AngularJSコントローラコントローラの唯一の違いは、彼らがmenuItemPropertyをintialisingによって使用メニュー項目のリストです。

HTML側のメニュー項目リストを選択し、1つのコントローラのみの複数のインスタンスを使用する正しいデザインパターンは何ですか？

サービス、工場などでコントローラを1つだけ使用するのは正しいパターンですか？あなたはルーティングを使用することができ

HTML側イストここ

<div id="menuItemMainService" 
    ng-controller="kinServiceNumF32Controller as kinServiceCtrl" 
    class="w3-panel rte-menuPage" style="display: none"> 
    <table id="idTableObjectItem" class="w3-table"> 
     <tr> 
      <th>Name</th> 
      <th>Value</th> 
      <th>Unit</th> 
      <th>Object Id</th> 
     </tr> 
     <tr ng-repeat="objectItem in kinServiceCtrl.objectItemList" > 
      <td>{{objectItem.name}}</td> 
      <td><input ng-model="objectItem.value" class="w3-input w3-right-align" type="text"></td> 
      <td>{{objectItem.unit}}</td> 
      <td>{{objectItem.objectId}}</td> 
     </tr> 
    </table> 

    <button id="buttonRefreshService" class="w3-btn" ng-click="kinServiceCtrl.refresh()">Refresh</button> 
    <button id="buttonSaveService" class="w3-btn" ng-click="kinServiceCtrl.save()">Save</button> 
</div> 

Answer 1

。 たとえば、標準的な角度ngRouterを使用できます。この場合、コントローラの引数リストでmenuItemPropertyを移動することができます。

kinAngularApp.controller('kinOverviewController',['menuItemProperty ', function(menuItemProperty) { 
var self = this; 

self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]); 

self.refresh = function() { 
    self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]); 
    refreshOverviewPage(); 
} 
self.save = function() { 
    saveObjectItemListValues(DefMenuItem[menuItemProperty], self.objectItemList); 
} 

}]）;

ここでは例：http://codepen.io/anon/pen/zBQKZk