3

我正在使用 Angular 1.6 的 Monaco 编辑器，在我的 UI 中，我有不同的选项卡（如 [this][1] 示例中）指向不同的 html 页面。

[1]：https ://www.w3schools.com/howto/howto_js_tabs.asp我正在使用 Monaco 编辑器，但问题是它仅在第一个选项卡中应用（集成）到项目（文本/文本框），如果我在第一个选项卡以外的其他选项卡中申请，它没有显示在那里，这是我的代码的一部分，只是为了得到一个想法。

angular.module('sample').config(['$routeProvider', function ($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: '/',
    controller: 'MainCtrl'
  }).when('/sample1', {
    templateUrl: '/sample1',
    controller: 'sample1Ctrl'
  }).when('/sample2', {
    templateUrl: '/sample2',
    controller: 'sample2Ctrl',
  }).when('/sample3', {
    templateUrl: '/sample3',
    controller: 'sample3Ctrl'
  }).when('/sample4', {
    templateUrl: '/sample4',
    controller: 'sample4Ctrl'
  }).otherwise({
    redirectTo: '/'
  });
}]);    
angular.module('sample').controller('TabCtrl', function ($scope) {
      $scope.tabs = [
        {
          slug: 'sample1',
          title: "Register sample1",
          content: "sample1"
        },{
          slug: 'sample2',
          title: "Register sample2",
          content: 'sample2'
        },
        {
          slug: 'sample3',
          title: "Get sample3",
          content: "sample3"
        },
        {
          slug: 'sample4',
          title: "Register sample4",
          content: "sample4"
        }
      ];
    });

这就是我在控制器中使用摩纳哥编辑器的方式

$scope.experimentConfigEditor = monaco.editor.create(document.getElementById('experimentText'), {
    value: '',
    language: 'json',
    minimap: {
      enabled: false
    }
  });
  $scope.newExperimentConfigEditor = monaco.editor.create(document.getElementById('newExperimentText'), {
    value: '',
    language: 'json',
    minimap: {
      enabled: false
    }
  });
  $scope.getConfigFromDatalensTextEditor = monaco.editor.create(document.getElementById('getText'), {
    value: '',
    language: 'json',
    minimap: {
      enabled: false
    }
  });

这是示例 html 文件

<div id="experimentText"  name="experimentText" style="width:600px;height:200px;border:1px solid grey" ng-show="experimentText" ng-model="formData. experimentText"></div>

因此，如果我在第一个选项卡中使用带有 Monaco 的控制器，那么只有 Monaco 被应用，否则它不起作用，html 元素将作为一个简单的元素出现，而 UI 中没有 Monaco 编辑器。

4

0 回答 0