为什么我的AngularJS指令共享作用域？

一尘不染

为什么我的AngularJS指令共享作用域？

angularjs

我试图做一个简单的指令来显示名称并允许对其进行更改。当我在名称页上放置多个指令时，它们似乎都共享name属性。我究竟做错了什么？

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset=utf-8 />
<title></title>

  <script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
  <script src="http://code.angularjs.org/1.2.0-rc.3/angular-resource.min.js"></script>
  <script src="http://code.angularjs.org/1.2.0-rc.3/angular-animate.min.js"></script>
  <script>
    var app = angular.module('app', []);

    app.directive('person', function () {

    function link ($scope, elem, attrs, ctrl) {

        $scope.name = "OLD"

        $scope.setName = function() {
            $scope.name = 'NEW';
        }
    }

    return {
      restrict: 'E',
      replace: true,
      template: "<span>Current name = {{name}}<a href='' class='btn' ng-click='setName()'>Change name</a><br></span>",
      link : link,
    }

  });

  app.controller('MainCtrl', function ($scope) { });

  </script>

</head>

<body ng-controller='MainCtrl'>
  <person></person><br>
  <person></person><br>
  <person></person><br>
  <person></person><br>
</body>

</html>

阅读 183

2020-07-04

共1个答案

一尘不染

如前面的答案中所述，AngularJS指令的默认行为是共享它们所包含的范围。此行为通过scope指令定义对象中的参数进行更改。

您可以在AngularJS文档的此部分中查看scope参数的文档：http :
//docs.angularjs.org/api/ng.$compile#description_comprehensive-directive-
api_directive-definition-
object

此参数具有三个选项：

scope: false -共享指令包含的范围的默认行为
scope: true -为指令创建一个新的作用域，其作用类似于其他子作用域，并从其父作用域原型继承
- 参见示例1
- scope: {} -创建一个不从其父范围继承原型的隔离范围
- 参见示例2

从JSBin示例中可以看到，选项2和3都适用于您的示例。区别在于您是否要隔离新作用域。

AngularJS指南的指令部分中有一个很好的章节，说明了为什么隔离范围可以帮助使用指令创建更好的可重用模块：
AngularJS指南：隔离指令的范围

2020-07-04