AngularJS ng-bind-template指令

AngularJS中的ng-bind-template指令用于用给定表达式的值替换HTML元素的内容。它用于绑定一个以上的表达式。它可以有多个{{ }}表达式。它被所有的HTML元素所支持。

语法：可以使用ng-bind-template指令。

作为一种属性。

<element ng-bind-template="expression">
    Contents...
</element>

作为一个元素。

<ng-bind-template ng-bind-template="expression">
    Content...
</ng-bind-template>

参数植:

expression：这个参数指定了一个以上的表达式将被评估，其中每个表达式都用{{}}包围。它是字符串类型的。

实例1：本实例使用ng-bind-template指令来显示绑定内容。

<!DOCTYPE html>
<html>
 
<head>
    <title>
        ng-bind-template Directive
    </title>
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
    </script>
</head>
 
<body ng-app="app" style="text-align:center">
 
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>ng-bind-template Directive</h2>
 
    <div ng-controller="geek">
        Choose one:<br>
        <label>Linear Search
            <input type="radio"
                   name="r1"
                   ng-model="search"
                   value="Linear Search" />
        </label><br>
        <label>Binary Search
            <input type="radio"
                   name="r1"
                   ng-model="search"
                   value="Binary Search" />
        </label><br>
        <span ng-bind-template=
            "{{msg}} {{search}}"></span>
        <br>
    </div>
 
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['scope',
        function (scope) {
            scope.msg =
              "The better searching algorithm is: ";
            scope.search = ""
        }]);
    </script>
</body>
</html>

输出:

AngularJS ng-bind-template指令

例子2：这个例子使用ng-bind-template指令来显示绑定内容。

<!DOCTYPE html>
<html>
 
<head>
    <title>ng-bind-template Directive</title>
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
    </script>
</head>
 
<body ng-app="app" style="text-align:center">
 
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>ng-bind-template Directive</h3>
    <div ng-controller="geek">
        <label>Football
            <input min="0"
                   type="number"
                   ng-model="Football" />
        </label><br><br>
        Count of Footballs:
        <span ng-bind-template="{{Football}}"></span><br>
    </div>
 
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['scope',
                                function (scope) {
            $scope.Football = "";
        }]);
    </script>
</body>
</html>