Extjs面板內部的角度

免責聲明：將角度放在Extjs面板內不是我的選擇。我有一些需要這樣的業務需求，所以請不要這樣做，「你不應該這樣做」的答案。Extjs面板內部的角度

我正在用extjs 6.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>' 
    });

我也已經包括在頁面頂部的腳本：

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

在這種情況下，模板認爲名稱是內線的模板，使有道理的，因爲它在括號內的參數，所以畫面看起來像這個：

有什麼建議嗎？

編輯：

現在也已經嘗試手動自舉它：

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

來源

2017-02-14 Slims

試過這個，似乎沒有工作。檢查新的編輯。 – Slims

想通了，看起來是我的答案。 – Slims

好吧，我在一個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裏面它，然後調用引導方法的空面板：

下面是一個包含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指引我在bootstrapping方向。

來源

2017-02-14 17:00:32 Slims

我也被困在這個問題上。我從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

來源

2017-04-06 18:25:13

Extjs面板內部的角度

回答

相關問題