Extjs面板内的角度

Question

Disclaimer: it's not my choice to put angular inside of an Extjs panel. I have certain business needs that require this, so spare me the, "you shouldn't do this" answers.

I'm writing a mobile webapp with extjs 6.0.1. For various reasons out of my control, I need to be able to use angular in my extjs app. My first attempt at this is to just display an Ext Panel and put angular markup in the html config, like this:

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

I also have included the script at the top of the page:

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

However, it is just parsing it like plain old HTML in my panel, so the result is this:

I have also tried using a template like this:

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

In this case the template thinks the name is an argument for the Ext template, which make sense since it's in the brackets, so the screen looks like this instead:

Any ideas?

EDIT:

Now also have tried bootstrapping it manually:

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

Still doesn't work. I get:

Hello {{greetMe}}

instead of:

Hello World

Answer 1

Ok I got angular working in an Extjs Panel's html config. Turns out extjs doesn't like script elements in the html config, so we need to place them elsewhere. Here's what I did.

At the top of my document in the where I include all my extjs files and angular, I added this:

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

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

Then, within Extjs (in my case I have a card panel and I swap over to an empty panel with angular html inside of it and then call the bootstrap method:

Here's the panel containing angularjs markup:

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

Then when I want to set this panel active I just do:

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

Using this method, you can easily inject Angularjs markup into extjs panels. This is a simple example but it's plain to see that this method should allow for any amount of complexity needed.

Special thanks to estus for pointing me in the bootstrapping direction.

Answer 2

I was also stuck on this issue. I found the solution from Slims answer. I got the idea from Slims answer and I applied in the simple code. Here is a fiddle example for simple integration of AngularJS into Extjs panel :-

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