Javascript AngularJS指令需要监视两个属性

我在做一个游戏。每个玩家对象都有一个

x

和一个

y

属性。每当玩家移动时，我想启动一个计时器，在精灵画面中的几个背景位置循环

我想我会用指令来做这件事。问题是，指令通常只允许您设置一个要监视的表达式：

// "test" directive
module.directive("test", function() {
  return function(scope, element, attrs) {
    scope.$watch(attrs.test, function(value) {
      // do something when it changes
    })
  }
})

// my template
<div test="name"/>

---

有没有你能想到的最好的方法？基本上，我想做一个指令，如果几个属性中的任何一个发生变化，它会在计时器上做一些事情

这方面有一些解决办法

---

在我看来，最简单、最易读的解决方案是使用两个属性，只需设置两个手表：

// "test" directive
module.directive("test", function() {
  return function(scope, element, attrs) {
    var doStuff = function() {
      console.log(attrs.test);
      console.log(attrs.testTwo);
    }
    scope.$watch(attrs.test, doStuff);
    scope.$watch(attrs.testTwo, doStuff);

  }
})

// my template
<div test test="player1.x" test-two="player1.y" />

/“测试”指令
模块指令（“测试”，函数（）{
返回函数（范围、元素、属性）{
var doStuff=函数（）{
控制台日志（属性测试）；
log（attrs.testTwo）；
}
范围：$watch（属性测试，doStuff）；
范围：$watch（attrs.testTwo，doStuff）；
}
})
//我的模板

我会尝试使用$watch函数中的函数

这是你的电话号码

var-app=angular.module（'plunker'，[]）
.directive（'myDir'，function（）{
返回{
限制：'E'，
模板：'X:{{X}，Y:{{Y}'，
链接：功能（范围、elm、属性）{
范围：$watch（函数（）{
变量位置={}；
location.x=attrs.x；
location.y=attrs.y；
返回位置；
}，函数（newVal、oldVal、scope）{
console.log（'change！'）；
scope.x=newVal.x；
scope.y=newVal.y；
}，对）；
}
};
});
应用程序控制器（'MainCtrl'，函数（$scope）{
});
X:
Y:

看

---

您也可以使用$watchGroup-请参阅注意，我知道您可以将函数传递到作用域中。$watch，并返回自定义的内容，但这个问题更多的是关于我如何告诉指令在绑定函数时在函数中做什么。关于

？问题是您必须跳过并使用

attrs.$observe

而不是

scope.$watch

。这看起来很奇怪，我必须根据它的使用方式来改变我使用的函数。我也喜欢这种语法，但是如果我想让它这样，这个指令就可以用在没有x或y的东西上呢？它所做的只是在一个或多个属性发生变化时激活，但用户有权做出决定？您如何看待用户指定要监视的属性？我想这就是我要问的。在不强制只使用x和y的情况下，您将如何执行建议的操作。有两种属性吗？或者一个单一的属性，如果用户想要的话？查看我对eventOn答案的评论。现在有了

watchGroup

您可以将手表挤压在一起

scope.$watch（[attrs.test，attrs.testTwo]，doStuff）为什么要将位置存储在$watch的第一个param函数中？然后可以监视location对象。这是使用一个watch监视多个变量的方法。我没说它更快。然而，我认为它确实为你节省了一块手表。你可能会从中受益。顺便说一句，AngularJS的创建者就是这样做的，我看到一个核心成员在某处使用这种方式。如果你要这样做，那么为什么还要麻烦存储变量。。。scope.$watch（函数（）{return{x:attrs.x，y:attrs.y}；}，…，true）；除此之外，你们现在依靠的是深度平等。我仍然会选择两块手表，它们在变化时调用相同的函数。嗯，我认为是一样的。位置是一个局部变量。你只要匿名就行了。你说的“深度平等”是什么意思？
// "test" directive
module.directive("test", function() {
  return function(scope, element, attrs) {
    var doStuff = function() {
      console.log(attrs.test);
      console.log(attrs.testTwo);
    }
    scope.$watch(attrs.test, doStuff);
    scope.$watch(attrs.testTwo, doStuff);

  }
})

// my template
<div test test="player1.x" test-two="player1.y" />

var app = angular.module('plunker', [])
.directive('myDir',function(){
  return {
    restrict:'E',
    template:'<span>X:{{x}}, Y:{{y}}</span>',
    link:function(scope, elm, attrs){
      scope.$watch(function (){
        var location = {};
        location.x = attrs.x;
        location.y = attrs.y;
        return location;
      }, function (newVal,oldVal,scope){
        console.log('change !');
        scope.x = newVal.x;
        scope.y = newVal.y;
      }, true);
    }
  };
});

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

});





 <div>X: <input type='text' ng-model='x'/></div>
  <div>Y: <input type='text' ng-model='y'/></div>
  <my-dir x='{{x}}' y='{{y}}'></my-dir>

scope.$watch(function () {
  return [attrs.test, attrs.test-two];
}, function(value) {
      // do something when it changes
}, true);