javascript - 如何使用angularjs减少冗余代码？

Question

dt.html 和 st.html 完全相同，唯一的区别在于 Controller 是 scoket.on 调用 dtconsumer vs stconsumer，我如何为两个 View 使用一个 Controller 或为两个不同的状态使用相同的 View 和 Controller 。 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);
    });

应用程序.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，因此您可以保留1 个以dt/st 作为参数的url。像这样。

应用程序.js

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

控制键

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