Javascript Extjs面板内部的角度

免责声明：在Extjs面板中放置angular不是我的选择。我有一些业务需求需要这样做，所以请不要告诉我“你不应该这样做”的答案

我正在用extjs6.0.1编写一个移动webapp。出于我无法控制的各种原因，我需要能够在extjs应用程序中使用angular。我的第一次尝试是只显示一个Ext面板，并在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>'
  });

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

this.\u angularPanel=Ext.create（'Ext.Panel'{
高度：“100%”，
宽度：“100%”，
cls:“angularPanel”，
html:
''+
“
名称：
”+
“你好{{name}”+
''
});

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

<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',
    html:
        '<div ng-app="">'+
          '<p class="angTest">Name : <input type="text" ng-model="name"></p>'+
          '<h1>Hello {{name}}</h1>'+
        '</div>'
  });

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

this.\u angularPanel=Ext.create（'Ext.Panel'{
高度：“100%”，
宽度：“100%”，
cls:“angularPanel”，
第三方物流：[
''+
“
名称：
”+
“你好{{name}”+
''
],
数据：{}
});

在本例中，模板认为名称是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>'
  });

this.\u angularPanel=Ext.create（'Ext.Panel'{
高度：“100%”，
宽度：“100%”，
cls:“angularPanel”，
html:
' '+
“你好{{{greetMe}}！”+
' '+
' '+
' '+
'angular.module（“myApp”，[]）.controller（“MyController”，[“$scope”，function（$scope）{'+
“$scope.greetMe=”世界“+
'}]); '+
'angular.element（函数（）{'+
'angular.bootstrap（文档，[“myApp”]）；'+
'}); '+
''
});

还是不行。我得到：

你好{{greetMe}}

而不是：

---

你好，世界

好的，我在Extjs面板的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中（在我的例子中，我有一个卡片面板，我切换到一个带有角度html的空面板，然后调用bootstrap方法：

以下是包含angularjs标记的面板：

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

使用此方法，您可以轻松地将Angularjs标记注入extjs面板。这是一个简单的示例，但很明显，此方法应考虑到所需的任何复杂性

---

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

好的，我在一个Extjs面板的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中（在我的例子中，我有一个卡片面板，我切换到一个带有角度html的空面板，然后调用bootstrap方法：

以下是包含angularjs标记的面板：

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

使用此方法，您可以轻松地将Angularjs标记注入extjs面板。这是一个简单的示例，但很明显，此方法应考虑到所需的任何复杂性

---

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

我也被困在这个问题上。我从Slims answer中找到了解决方案。我从Slims answer中得到了想法，并应用到了简单的代码中。下面是一个将AngularJS简单集成到Extjs面板的fiddle示例：-

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

this.\u angularPanel=Ext.onReady（函数（）{
Ext.create（'Ext.Panel'{
renderTo:“helloWorldPanel”，
身高：100，
宽度：200，
标题：“你好，世界”，
html:'+
“你好{{{greetMe}}！”+
“

”+
“更改问候语”+
' '
});
bootstrapAngular（）；

}))

---

我也被这个问题困住了。我从Slims answer中找到了解决方案。我从Slims answer中得到了想法，并应用到了简单的代码中。下面是一个将AngularJS简单集成到Extjs面板中的fiddle示例：-

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

this.\u angularPanel=Ext.onReady（函数（）{
Ext.create（'Ext.Panel'{
renderTo:“helloWorldPanel”，
身高：100，
宽度：200，
标题：“你好，世界”，
html:'+
“你好{{{greetMe}}！”+
“

”+
“更改问候语”+
' '
});
bootstrapAngular（）；

}))

---

尝试此操作，似乎不起作用。检查新编辑。算出，似乎是我的答案。尝试此操作，似乎不起作用。检查新编辑。算出，似乎是我的答案。