1. 程式人生 > >AngularJS 不得不瞭解的服務 $compile 用於動態顯示html內容

AngularJS 不得不瞭解的服務 $compile 用於動態顯示html內容

專案中一度糾結與AngularJS如何動態顯示不同的html內容。

本來是希望直接使用下面的語句來實現:

1 <div> </div>

但是很尷尬的是,這樣不能識別出html標籤,而是直接將html裡的頁面標籤全都顯示出來了。這當然不是我想要的效果。

谷哥了一番,沒想到在官網上就找到了我想要實現的效果,而實現的主角就是今天的 $compile 服務。

節選一下關鍵部分內容,Javascript:

1234567891011121314151617181920212223242526272829303132 <script> angular.module('compileExample'
, [], function($compileProvider) { // configure new 'compile' directive by passing a directive // factory function. The factory function injects the '$compile' $compileProvider.directive('compile', function($compile) { // directive factory creates a link function return function(scope, element, attrs
)
{ scope.$watch( function(scope) { // watch the 'compile' expression for changes return scope.$eval(attrs.compile); }, function(value) { // when the 'compile' expression changes // assign it into the current DOM element.html(value); // compile the new DOM and link it to the current
// scope. // NOTE: we only compile .childNodes so that // we don't get into infinite loop compiling ourselves $compile(element.contents())(scope); } ); }; }); }) .controller('GreeterController', ['$scope', function($scope) { $scope.name = 'Angular'; $scope.html = 'Hello '; }]);</script>

Html:

12345 <div ng-controller="GreeterController"> <input ng-model="name"> <br> <textarea ng-model="html"></textarea> <br> <div compile="html"></div></div>

總之就是用$compile服務建立一個directive ‘compile’,這個complie會將傳入的html字串或者DOM轉換為一個template,然後直接在html裡呼叫compile即可。

我基本就是直接copy過來就可以用了,各位看官自便咯~