AngularJS 指令与隔离作用域和 ng-model

在本文中，我们将介绍 AngularJS 中的指令，并重点关注具有隔离作用域和 ng-model 功能的指令。指令是 AngularJS 的一个重要特性，它可以扩展 HTML，并为我们提供了自定义的标签和属性，以便实现特定的功能。

阅读更多：AngularJS 教程

指令概述

指令是在 HTML 标签中使用的一种特殊指令，它们指示 AngularJS 如何操作 DOM 元素。指令可以添加行为，提供新的标签，修改元素样式和属性，并允许我们在 DOM 元素上附加指定的行为。

AngularJS 中有许多内置的指令，如 ng-model、ng-repeat 等。除了内置指令，我们还可以自定义指令，以满足我们具体的需求。

隔离作用域

AngularJS 允许我们创建具有隔离作用域的指令，这意味着指令中的数据不会与父作用域中的数据相互影响。通过隔离作用域，我们可以更好地组织和管理应用程序的数据。

在创建具有隔离作用域的指令时，我们需要使用 scope 属性，并将其设置为一个新的作用域对象，在这个作用域对象中我们可以定义需要共享的数据和方法。

让我们通过一个示例来理解隔离作用域的概念。

<div ng-app="myApp" ng-controller="myCtrl">
  <my-directive/>
</div>

<script>
  var app = angular.module("myApp", []);

  app.controller("myCtrl", function(scope) {scope.name = "John";
  });

  app.directive("myDirective", function() {
    return {
      restrict: "E",
      scope: {},
      template: "<input type='text' ng-model='name'>"
    };
  });
</script>

在上面的例子中，我们创建了一个名为 myDirective 的指令，并在指令中定义了一个输入框。通过 scope: {}，我们创建了一个隔离作用域，并在这个作用域中绑定了 ng-model='name'。这样一来，输入框中的数据将会与指令所在的控制器中的 $scope.name 绑定，但不会与其他作用域中的数据相互影响。

ng-model 指令

AngularJS 的 ng-model 指令是一个双向数据绑定的指令，它可以将 HTML 元素中的值与作用域中的变量进行绑定。ng-model 可以应用在输入框、下拉框、单选框等元素上。

ng-model 指令的用法如下：

<input type="text" ng-model="name">

在上面的例子中，我们使用 ng-model 将输入框的值与作用域中的 name 变量进行绑定。当用户在输入框中输入内容时，作用域中的 name 变量也会相应地更新。

通过结合隔离作用域和 ng-model，我们可以更灵活地管理数据和实现复杂的功能。

示例说明

让我们再来看一个更具体的示例，来展示隔离作用域和 ng-model 的强大功能。

<div ng-app="myApp" ng-controller="myCtrl">
  <my-directive/>
</div>

<script>
  var app = angular.module("myApp", []);

  app.controller("myCtrl", function(scope) {scope.person = {
      name: "",
      age: 0
    };
  });

  app.directive("myDirective", function() {
    return {
      restrict: "E",
      scope: {},
      template: `
        <input type="text" ng-model="person.name">
        <input type="number" ng-model="person.age">
        姓名：{{person.name}}
        年龄：{{person.age}}
      `
    };
  });
</script>