Extjs面板內的角度

Question

免責聲明：在Extjs面板中放入角形不是我的選擇。 我有某些需要這樣做的業務需求，因此請避免回答“您不應該這樣做”的答案。

我正在用extjs 6.0.1編寫移動Web應用程序。 由於無法控制的各種原因，我需要能夠在extjs應用程序中使用angular。 我的第一個嘗試是僅顯示一個Ext Panel，並將角度標記放入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 Panel的html配置中進行了工作。 事實證明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標記注入extjs面板。 這是一個簡單的示例，但很明顯，此方法應允許所需的任何復雜程度。

特別感謝estus指出了我的引導方向。

Answer 2

我也被這個問題困擾。 我從Slims答案中找到了解決方案。 我從Slims答案中得到了這個想法，並在簡單的代碼中得到了應用。 這是一個將AngularJS簡單集成到Extjs面板中的小提琴示例：-

this._angularPanel = Ext.onReady(function() {
Ext.create('Ext.Panel', {
    renderTo: 'helloWorldPanel',
    height: 100,
    width: 200,
    title: 'Hello world',
    html: '<div ng-app="myApp" ng-controller="MyController"> '+
    'Hello {{greetMe}}! ' +
    '<br><br>' +
    '<button ng-click="changeGreeting()">Change Greeting</button>' +
    '</div> '
});
bootstrapAngular();

}）;

點擊這里小提琴