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，它们每个都有 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定义了一个特定的scope，并且只使用声明在这个scope上的代码。

命名空间也一样。如果该方法存在，他只执行 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>