Extjs面板内部的角度

时间:2017-02-14 15:30:19

标签: javascript angularjs extjs

免责声明:将角度置于Extjs面板内部并不是我的选择。我有一些需要这样的业务需求,所以请不要这样做,并且#34;你不应该这样做"答案。

我正在使用extjs 6.0.1编写移动网络应用程序。由于我无法控制的各种原因,我需要能够在我的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一样,结果就是这样:

enter image description here

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

  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模板的参数,因为它在括号中是有意义的,所以屏幕看起来像这样:

enter image description here

有什么想法吗?

编辑:

现在也尝试手动引导它:

  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}}

而不是:

Hello World

2 个答案:

答案 0 :(得分:1)

好的,我在Extjs Panel的html配置中工作了角色。结果是extjs不喜欢html配置中的脚本元素,所以我们需要将它们放在别处。这就是我的所作所为。

在我的文档顶部,我包含了所有的extjs文件和角度,我添加了这个:

  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> '
  });

然后,当我想将此面板设置为活动时,我就这样做:

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

使用此方法,您可以轻松地将Angularjs标记注入extjs面板。这是一个简单的例子,但很明显,这种方法应该允许所需的任何复杂性。

特别感谢estus指引我进入自举方向。

答案 1 :(得分:0)

我也被困在这个问题上。我找到了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();

});

click here for fiddle