AngularJS動態綁定html

時間 2020-07-10

原文原文鏈接

在web開發中咱們常常須要將動態拼接的html字符串綁定到頁面DOM上。html

AngularJS中咱們能夠使用指令ng-bind-html來綁定動態Html，它會將計算出來的表達式結果用innerHtml綁定到html。web

可是AngularJS默認是不相信添加的html內容的，因此咱們須要調用$sce(Strict Contextual Escaping)服務來解決問題。api

$sce is included by default starting with angular 1.2

<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
    
body{
  border: 5px solid #FF851B;
  padding: 10px;
}
.info{
  color:#0074D9;
}
.age{
  color:#FF4136;
}

</style>
</head>
<body ng-controller="myCtrl">
    <div ng-bind-html="html"></div>
    <script>
    angular.module('myApp', [])
    .controller("myCtrl", ["$scope","$sce",function($scope,$sce) {
         $scope.myage = 16;
 
         $scope.myInfo = {
                name:"chenjy"
         };
         var html ="<div>my name:<span class='info'>chenjy</span>,my age:<span class='age'>16</span></div>";
         
         $scope.html = $sce.trustAsHtml(html);
        
    }]);
    </script>
</body>
</html>

對於靜態html這就夠了，可是咱們若是須要用到AngularJS強大的雙向數據綁定能力app

var html ="<div>my name:<span class='info'>{{myInfo.name}}</span>,my age:<span class='age'>{{myage}}</span></div>";

ng-bind-html並不會和$scope雙向綁定，而且ng-click等指令也不會獲得compileoop

咱們能夠藉助$compile編譯html

<body ng-controller="myCtrl">
    <script>
    angular.module('myApp', [])
    .controller("myCtrl", ["$scope","$compile",function($scope,$compile) {
         $scope.myage = 16;
 
         $scope.myInfo = {
                name:"chenjy"
         };
         
         var template ="<div>my name:<span class='info'>{{myInfo.name}}</span>,my age:<span class='age'>{{myage}}</span></div>";
         var ele =  $compile(template)($scope);
         angular.element(document.body).append(ele);
         
    }]);
    </script>
</body>

可是AngularJS中咱們最好直接寫在directive的link中，此時編譯階段已經結束咱們能夠手動編譯html。spa

.directive("myDir", ["$compile",function($compile) {
					return {
						restrict: "E",
						link: function(scope, iElement, iAttrs) {
							var template = "<div>my name:<span class='info'>{{myInfo.name}}</span>,my age:<span class='age'>{{myage}}</span></div><input type='text' ng-model='myage' />";
							var ele = $compile(template)(scope);
							iElement.append(ele);
						}
					};
				}]);

下面貼一個網上看到的比較通用的compile例子3d

<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
    
body{
  border: 5px solid #FF851B;
  padding: 10px;
}
.info{
  color:#0074D9;
}
.age{
  color:#FF4136;
}

</style>
</head>
<body ng-controller="myCtrl">
    <html-compile html='{{html}}'></html-compile>
    <script>
    angular.module('myApp', [])
    .controller("myCtrl", ["$scope","$sce",function($scope,$sce) {
         $scope.myage = 16;
 
         $scope.myInfo = {
                name:"chenjy"
         };
         
         $scope.changeAge = function(){
         	$scope.myage ++;
         };
         
         $scope.html ="<button ng-click='changeAge()'>change</button><div>my name:<span class='info'>{{myInfo.name}}</span>,my age:<span class='age'>{{myage}}</span></div>";
         
    }]).directive("htmlCompile", ["$compile", function($compile) {
        return {
            replace: true,
            restrict: 'EA',
            link: function(scope, elm, iAttrs) {
                var DUMMY_SCOPE = {
                        $destroy: angular.noop
                    },
                    root = elm,
                    childScope,
                    destroyChildScope = function() {
                        (childScope || DUMMY_SCOPE).$destroy();
                    };
                
				// 監聽html值
                iAttrs.$observe("html", function(html) {
				    /**
                      * 當傳入html的時候 先嚐試銷燬子scope,而後建立一個子scope,compile當前html,替換掉當前DOM
                      **/ 					    
                    if (html) {
                        destroyChildScope();
                        childScope = scope.$new(false);
                        var content = $compile(html)(childScope);
                        root.replaceWith(content);
                        root = content;
                    }
					// 在父scope銷燬的時候,銷燬該子scope
                    scope.$on("$destroy", destroyChildScope);
                });
            }
        };
    }]);
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。