javascript - Angular dom 中的上下文是如何维护的

Question

考虑下面的 DOM

<div ng-controller="A">
  <button ng-click="sayHello()">SayHello</button>
</div>
<div ng-controller="B">
  <button ng-click="sayHello()">SayHello</button>
</div>


A(){
   var sayHello() = function(){
     console.log("Hello")
   }
}
B(){
   var sayHello() = function(){
     console.log("Hello")
   }
}

假设我们有 2 个 Controller A 和 B，每个 Controller 都有 sayHello() 方法。

• 如何维护函数的上下文？
• Angular 如何知道要调用哪个函数？
• 如何使用原生 JavaScript 实现同样的效果？

编辑 1 - 如何将上下文关联到 DOM

<script>
  var module = {
    namspace: {}
  }
  var module.namspace.object1 = {}
  var module.namspace.object1.someFunction = function(){}
  var module.namspace.object2 = {}
  var module.namspace.object2.someFunction = function(){}
</script>
<div context="module.namspace">
    <div context="object1">
        <button id="button1" onClick="someFunction()">Click Me</button>
    </div>
    <div context="object2">
        <button id="button2" onClick="someFunction()">Click Me</button>
    </div>
</div> 

所以预期的行为是:

1. 当我点击#button1时，需要调用module.namspace.object1.someFunction
2. 当我点击#button2时，需要调用module.namspace.object2.someFunction

Answer 1

这是 Angular 的作用和特殊性， Controller 定义一个特定的范围并仅使用在此范围上声明的代码。

命名空间也是如此。如果该方法存在，他只会执行 A.sayHello() ，否则会出错。他不必区分它们。

您无法使用 JavaScript 在 HTML 中定义特定范围，但可以使用命名空间并创建相同的 functions/var 名称。

var A = {}; // namespace A
 A.sayHello= function (){
  alert("A hello");
 }; 


var B = {}; // namespace B
 B.sayHello= function (){
  alert("B hello");
 }; 

<div onclick="A.sayHello()">
  A
</div>
<div onclick="B.sayHello()">
  B
</div>