javascript - 设置为 true 时指令范围的奇怪行为

Question

我是 Angular 的新手，当它的范围设置为 true 时，遇到了 Custom Directive 的这种奇怪行为。在这种情况下，AngularJS 将通过继承父作用域(通常是 Controller 作用域，否则是应用程序的根作用域)来创建一个新的作用域。因此，在 Parent 中所做的任何更改都会反射(reflect)到 child 中，反之亦然。这种行为在这个 JSFiddle link 中是不一致的

HTML:

<div ng-app="schoolApp">

  <div ng-controller="schoolCtrl">
    <h2 ng-click="reverseName()">{{schoolName}}, Click me to reverse school name</h2>

    <h2>Student Name : {{student.firstName}} {{student.lastName}}<br>
            Student Contact Num : {{student.mobileNum}}
        </h2>
    <div>Edit in parent :
      <input type='text' ng-model='student.firstName'>
      <input type='text' ng-model='student.lastName'>
    </div>
    <div my-directive class='directive'></div>
  </div>
</div>

JS( Controller n 指令):

var app = angular.module("schoolApp", []);

app.controller("schoolCtrl", function($scope) {
  $scope.schoolName = 'Oxford Academy';
  $scope.reverseName = function() {
    $scope.schoolName = $scope.schoolName.split('').reverse().join('');
  };
  $scope.student = {
    firstName: 'Chris',
    lastName: 'Johnson',
    mobileNum: 123456
  }
});

app.directive("myDirective", function() {
  return {
    restrict: "EA",
    scope: true,
    template: "<strong>Inside Directive Scope</strong>" +
      "<div>School Name is : {{schoolName}}</div>" +
      "Change School name : <input type='text' ng-model='schoolName' />" +
      "<br><br>" +
      "<div> Student Details :</div>" +
      "Student Name : {{student.firstName}} {{student.lastName}}<br>" +
      "Student Contact Num : {{student.mobileNum}}" +
      "<br><br>" +
      "Change Student First Name : <input type='text' ng-model='student.firstName'/><br>" +
      "Change Student Last Name : <input type='text' ng-model='student.lastName'/><br>" +
      "Change Student Contact Number : <input type='text' ng-model='student.mobileNum'/>"
  };
});

问题场景:只要我在 Controller (父范围)中更改学校名称，它就会反射(reflect)在自定义指令(我的指令)中，但是一旦我在子范围中更改学校名称，看起来就会出现一些断开连接。 Child Scope 中的更改都没有反射(reflect)在 Parent 中，反之亦然。

但是按照相同的步骤在 Controller (父范围)中更改学生的名字或姓氏将显示在自定义指令(我的指令)中，并且在子范围中更改学生的名字或姓氏将反射(reflect)在父范围中。无论您对 Student First name n Last name 进行多少次迭代更改，它都可以正常工作。

谁能告诉我我做错了什么或者我需要了解幕后工作原理吗？

Answer 1

1. scope : true(指令获得一个新的范围)Angular 在这里没有做任何事情，但奇怪的行为是因为 JavaScript 原型(prototype)继承。当子级更改父级的 原始值(字符串、数字、 bool 值) 时会发生什么，它最终会在子级中创建值的副本，并打破继承链。这就是当 schoolName 在指令(子范围)中更改时它获得了自己的副本并且与父级的继承链被折腾了。

但情况并非如此当您更改 JS 对象(在您的例子中是附加到 $scope 的学生对象)时，无论如何继承链都将保持不变。强>

1. scope : false(指令使用其父范围)

另一方面，如果您将 scope 设置为 false，您的 child 将始终使用 Parent 范围，并且永远不会有机会打破继承链。

希望这有帮助:-)