7

我正在用 Angular 制作游戏。每个玩家对象都有一个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指令不必假设范围具有任何特定属性。当你使用指令时，你告诉它使用什么。

问题是，在我的情况下，如果 x 或 y 发生变化，我需要开始一些事情。我怎样才能做到这一点？

<div test="player.x, player.y"/>
<div test="player.x" test-two="player.y"/>

有没有你能想到的最好的方法来做到这一点？基本上，如果几个属性中的任何一个发生变化，我想制定一个在计时器上执行某些操作的指令。

4

4 回答 4

14

我认为最简单和最易读的解决方案是使用两个属性并简单地设置两个手表：

// "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" />
于 2012-11-11T08:06:26.347 回答
7

我会尝试在 $watch 函数中使用一个函数。

这是plunker

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>
于 2012-11-11T19:59:41.633 回答
1

有一些解决方法

查看多个 $scope 属性

https://groups.google.com/forum/?fromgroups=#!topic/angular/yInmKjlrjzI

于 2012-11-11T04:47:52.117 回答
1 
scope.$watch(function () {
  return [attrs.test, attrs.test-two];
}, function(value) {
      // do something when it changes
}, true);

看到这个链接

您也可以使用$watchGroup - 请参阅此链接

于 2015-12-06T16:32:02.803 回答