angularjsを使用して冗長コードを減らすにはどうすればよいですか？

Question

dt.htmlとst.htmlは全く同じですコントローラの違いはscoket.onですdtconsumer対stconsumer、私はどのように2つの異なる状態の両方のビューまたは同じビューとコントローラに1つのコントローラを使用できますか。 jsとhtmlに冗長コードがたくさんあります。この問題を解決する最良の方法は何ですか？

ディレクティブを書く必要がありますか？

dt.html

<div class="panel-body display-logs" scroll-bottom="event" style="width:100%;"> 
         <ul style="list-style: none;"> 
          <li ng-repeat="message in event | limitTo:1000" ng-class="{lastItem: $last}"><span>{{message.value}}</span></li> 
         </ul> 
       </div> 

はCtrl-1.js

var searchEnv = 'DT'; 
$scope.event = []; 
socket.on('dtConsumer',function (data) { 
     var obj = { 
      file:$scope.filename, 
      data:data 
     } 
     var messageSize = getBytesForBuffer(data); 
     $scope.event.push(data); 
    }); 

はCtrl-2.js

var searchEnv = 'st'; 
$scope.event = []; 
socket.on('StConsumer',function (data) { 
     var obj = { 
      file:$scope.filename, 
      data:data 
     } 
     $scope.event.push(data); 
     var messageSize = getBytesForBuffer(data); 
    }); 

app.js

.state('app.dt', { 
     url: '/dt', 
     templateUrl: 'view/partials/dt.html', 
     controller: 'DitCtrl' 
    }) 
    .state('app.st',{ 
     url:'/st', 
     templateUrl:'view/partials/st.html', 
     controller:'StCtrl' 
    }) 

Answer 1

$stateParamsを経由してdt/stを渡すことができるので、パラメータとしてdt/stを1つのURLにすることができます。このようなもの。

app.js

.state('app.dt', { 
    url: '/:type', 
    templateUrl: 'view/partials/dt.html', 
    controller: 'DitCtrl' 
}) 

ctrl.js

var searchEnv = $stateParams.type; 
$scope.event = []; 
socket.on(searchEnv+'Consumer',function (data) { 
    var obj = { 
     file:$scope.filename, 
     data:data 
    } 
    var messageSize = getBytesForBuffer(data); 
    $scope.event.push(data); 
});