Extjs 패널의 안쪽 부분

Question

면책 조항 : Extjs 패널 내부에 각을 넣지는 않습니다. 나는 이것을 요구하는 특정 비즈니스 요구 사항을 가지고 있으므로, "당신은 이것을하지 말아야합니다"라는 대답을 남겨주세요.

저는 extjs 6.0.1을 사용하여 모바일 웹 응용 프로그램을 작성하고 있습니다. 내 통제를 벗어나는 여러 가지 이유 때문에 내 extjs 응용 프로그램에서 각도를 사용할 수 있어야합니다. 이에 내 첫 번째 시도는 다음과 같이 외장 패널을 표시하고 HTML 설정에서 각 마크 업을 넣어하는 것입니다

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

:

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

는 또한 페이지의 상단에있는 스크립트를 포함했다

하지만, 그냥 내 패널에서 평범한 구식 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 설정에서 각 작업을 얻었다. 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 내부에 그 다음 부트 스트랩 메서드를 호출와 빈 패널 :이 패널의 행동을 설정하려는 경우 다음

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

: 여기

을 AngularJS와 마크 업을 포함하는 패널입니다 난 그냥 이렇게 살아야 :

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

이 방법을 사용하면 쉽게 extjs라는 패널에 AngularJS와 마크 업을 주입 할 수 있습니다. 이것은 간단한 예제이지만이 메소드가 필요한 복잡성을 허용해야한다는 것은 명백합니다.

부트 스트랩 방향으로 나를 가리켜 주신 estus에게 특별한 감사드립니다.

Answer 2

나는 또한이 문제에 봉착했습니다. Slims의 답변에서 해결책을 찾았습니다. 슬림 답변에서 아이디어를 얻었고 간단한 코드로 적용했습니다. 다음은 Extjs 패널에 AngularJS를 간단히 통합하기위한 예제입니다 : -

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