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个控制器A和B，每个控制器都有sayHello()方法。

如何维护该功能的上下文？
角度如何知道要调用哪个函数？
如何使用原生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>

所以预期的行为是：

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

Answer 1

角色的角色和特殊性，controller定义特定的scope并仅使用在此scope上声明的代码。

命名空间也一样。如果方法存在，他只执行A.sayHello()他执行else错误。他不能区分他们。

您无法使用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>

如何在角度dom中保持上下文

1 个答案: