2

所以我有一个有角度的大型 Web 应用程序，我有几个页面我想使用 React 来减少页面的渲染时间（>3000 行）。

在寻找解决方案时，我遇到了这个反应插件：http ://bebraw.github.io/reactabular/

它让我可以添加带有编辑选项等的数据表 - 非常适合我的需求。问题是没有简单的方法将它包含在预构建的 Angular 应用程序中。

由于我是新手，因此我想将其集成到我当前的 Angular 应用程序中，并且我在网上搜索了很长时间的答案。

我正在寻找一种将其集成到我当前代码中的方法，如下所示：

var contactManager = angular.module('contactManager', ['ngMaterial','ngCookies','ngRoute','loadingOnAJAX','truncate','chart.js','xeditable','datatables','ui.calendar',
  'xeditable', 'ngFileUpload','ui.bootstrap','html5.placeholder','luegg.directives','angular-svg-round-progress','ngProgress','ngDraggable'])
        .run(function($rootScope, ngProgress, editableOptions) {
          editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
          $rootScope.$on('$routeChangeStart', function(ev,data) {
            ngProgress.start();
          });
          $rootScope.$on('$routeChangeSuccess', function(ev,data) {
            // Close menu on mobiles
            ngProgress.complete();
          });
        })
        .config(['$routeProvider','$locationProvider','$controllerProvider', function($routeProvider, $locationProvider, $controllerProvider) {
$routeProvider
          .when('/index', {
    templateUrl: 'partials/adminPanel.html',
    controller: 'GroupPanelCtrl',
    resolve: GroupPanelCtrl.resolve
  })
          .when('/profile/:id', {
    templateUrl: 'partials/profile.html',
    controller: 'ProfileCtrl'
  })
          .when('/group/:id/contacts', {
    templateUrl: 'partials/group-contacts.html',
    controller: 'GroupContactsInfo',
    resolve: GroupContactsInfo.resolve
  })

和 HTML：

<table datatable="ng" class="table table-bordered table-hover dataTable" role="grid" data-page-length="100">
            <thead>
            <tr>
                <th></th>
                <th>{{texts.fullName}}</th>
                <th>{{texts.title}}</th>
                <th>{{texts.mobile}}</th>
                <th>{{texts.email}}</th>
                <th>{{texts.department}}</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
              <tr ng-repeat="contact in contacts track by $index">
                <td ng-click="clickContact()">{{img}}
                </td>
                <td ng-click="clickContact()">
                  <a>
                    {{::contact.fullName}}
                  </a>
                </td>
                <td ng-click="clickContact()">
                  {{::contact.title|| ""}}
                </td>
                <td ng-click="clickContact()">
                  {{::contact.phoneFormatted}}
                </td>
                <td ng-click="clickContact()">
                  <span>
                    {{::contact.email}}
                  </span>
                </td>
                <td ng-click="clickContact()">
                  {{::contact.department|| ""}}
                </td>
                <td ng-click="deleteContact(contact, $index)">
                  <span class="fa fa-trash showOnhover"></span>
                </td>
              </tr>
            </tbody></table>
4

1 回答 1

0

如果您需要从非 Angular 应用程序调用 Angular 代码，请尝试https://github.com/bcherny/ngimport。它允许您require/import来自非 Angular 文件的 Angular 服务。

于 2017-02-16T04:11:17.057 回答