AngularJS：在指令中使用ng-model

在本文中，我们将介绍在AngularJS指令中如何使用ng-model。AngularJS是一个流行的JavaScript框架，用于构建单页应用程序和动态Web应用程序。指令是AngularJS的一个核心特性，允许开发者创建自定义HTML元素或属性，并通过指令来扩展HTML的功能。ng-model是AngularJS的一个指令，用于在HTML元素（如input、select和textarea）和作用域之间建立双向数据绑定。

阅读更多：AngularJS 教程

什么是ng-model？

ng-model是AngularJS提供的一个指令，用于将HTML元素与作用域中的变量进行双向数据绑定。双向数据绑定是AngularJS的一个核心概念，它允许数据的改变自动反映在界面上，并且界面上的变化也会自动更新到数据模型中。通过使用ng-model，我们可以轻松地实现数据的双向绑定，从而提高开发效率。

在指令中使用ng-model

在AngularJS中，我们可以通过编写自定义指令来扩展HTML的功能。指令可以在HTML中以标签名或属性的形式使用，并且可以与作用域中的变量进行数据绑定。

下面是一个使用ng-model的简单示例：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS ng-model Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function (scope) {scope.message = "Hello, AngularJS!";
        });
        app.directive('myDirective', function () {
            return {
                template: '<input type="text" ng-model="message">',
                restrict: 'E'
            };
        });
    </script>
</head>
<body>
<div ng-controller="myCtrl">
    <h1>{{message}}</h1>
    <my-directive></my-directive>
</div>
</body>
</html>

在上面的示例中，我们定义了一个名为myDirective的指令，该指令包含一个输入框，使用了ng-model指令绑定到作用域中的message变量上。在控制器中，我们设置了message变量的初始值为”Hello, AngularJS!”。通过在HTML中使用my-directive标签，我们可以将输入框插入到页面中，并与作用域中的message变量进行双向数据绑定。

自定义指令中的ng-model

在指令中使用ng-model与在普通HTML元素中使用ng-model的语法是一样的。我们可以直接在指令的模板中使用ng-model指令，并将其绑定到作用域中的变量上。

下面是一个更复杂的示例，演示了在指令中使用ng-model的情况：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS ng-model in Directive Example</title>
    <style>
        .directive-container {
            border: 1px solid black;
            padding: 10px;
            margin-bottom: 10px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function (scope) {scope.items = [
                {name: 'Item 1', quantity: 0},
                {name: 'Item 2', quantity: 0},
                {name: 'Item 3', quantity: 0}
            ];
        });
        app.directive('itemDirective', function () {
            return {
                restrict: 'E',
                template:
                    '<div class="directive-container">' +
                    '<h2>{{item.name}}</h2>' +
                    '<input type="number" ng-model="item.quantity">' +
                    '<p>Quantity: {{item.quantity}}</p>' +
                    '</div>',
                scope: {
                    item: '=ngModel'
                }
            };
        });
    </script>
</head>
<body>
<div ng-controller="myCtrl">
    <item-directive ng-repeat="item in items" ng-model="item"></item-directive>
</div>
</body>
</html>

在上面的示例中，我们定义了一个名为itemDirective的指令，该指令包含一个directive-container的容器，里面包含一个标题（item.name）、一个输入框（ng-model=”item.quantity”），以及一个显示数量的段落（Quantity: {{item.quantity}}）。

通过在HTML中使用item-directive标签，并使用ng-repeat指令来遍历items数组，我们可以将自定义指令多次插入到页面中。每个自定义指令都会简历一个独立的作用域，并与items数组中的一个元素进行双向数据绑定。