javascript - Extjs 面板内部的 Angular

Question

免责声明:将 Angular 放入 Extjs 面板中并不是我的选择。我有某些需要这样做的业务需求，所以不要再给我“你不应该这样做”的答案。

我正在使用 extjs 6.0.1 编写一个移动 Web 应用程序。由于各种我无法控制的原因，我需要能够在我的 extjs 应用程序中使用 Angular。我的第一次尝试是只显示一个 Ext Panel 并将 Angular 标记放入 html 配置中，如下所示:

  this._angularPanel = Ext.create('Ext.Panel', {
    height: '100%',
    width: '100%',
    cls: 'angularPanel',
    html:
        '<div ng-app="">'+
          '<p class="angTest">Name : <input type="text" ng-model="name"></p>'+
          '<h1>Hello {{name}}</h1>'+
        '</div>'
  });

我还在页面顶部添加了脚本:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>

但是，它只是像面板中的普通旧 HTML 一样解析它，所以结果是这样的:

我也尝试过使用这样的模板:

  this._angularPanel = Ext.create('Ext.Panel', {
    height: '100%',
    width: '100%',
    cls: 'angularPanel',
    tpl: [
        '<div ng-app="">'+
          '<p class="angTest">Name : <input type="text" ng-model="name"></p>'+
          '<h1>Hello {{name}}</h1>'+
        '</div>'
        ],
    data: {}
  });

在这种情况下，模板认为名称是 Ext 模板的参数，这是有意义的，因为它位于括号中，因此屏幕看起来像这样:

有什么想法吗？

编辑:

现在也尝试过手动引导它:

  this._angularPanel = Ext.create('Ext.Panel', {
    height: '100%',
    width: '100%',
    cls: 'angularPanel',
    html:
      '<div ng-controller="MyController"> '+
         'Hello {{greetMe}}! ' +
      '</div> '+
      '<script src="http://code.angularjs.org/snapshot/angular.js"></script> '+
          '<script> '+
          'angular.module("myApp", []).controller("MyController", ["$scope", function ($scope) { '+
                '$scope.greetMe = "World"; '+
              '}]); '+

          'angular.element(function() { '+
            'angular.bootstrap(document, ["myApp"]); '+
          '}); '+
      '</script>'
  });

还是不行。我得到:

你好{{greetMe}}

而不是:

世界你好

Answer 1

好的，我在 Extjs 面板的 html 配置中进行了 Angular 工作。结果 extjs 不喜欢 html 配置中的脚本元素，因此我们需要将它们放在其他地方。这就是我所做的。

在包含所有 extjs 文件和 Angular 的文档顶部，我添加了以下内容:

  function bootstrapAngular() {
    angular.module('myApp', [])
        .controller('MyController', ['$scope', function ($scope) {
          $scope.greetMe = 'World';
        }]);

    angular.element(function() {
      angular.bootstrap(document, ['myApp']);
    });
  }

然后，在 Extjs 中(在我的例子中，我有一个卡片面板，我切换到一个空面板，里面有 Angular html，然后调用 bootstrap 方法:

这是包含 angularjs 标记的面板:

  this._angularPanel = Ext.create('Ext.Panel', {
    height: '100%',
    width: '100%',
    cls: 'angularPanel',
    html:
      '<div ng-controller="MyController"> '+
         'Hello {{greetMe}}! ' +
      '</div> '
  });

然后，当我想将此面板设置为事件状态时，我只需执行以下操作:

    this.setActiveItem(this._angularPanel);
    bootstrapAngular();

使用此方法，您可以轻松地将 Angularjs 标记注入(inject)到 extjs 面板中。这是一个简单的示例，但很明显，该方法应该允许所需的任何复杂程度。

特别感谢 estus 为我指明了引导方向。