7

Angularでゲームを作っています。各プレーヤー オブジェクトにはx、 プロパティとyプロパティがあります。プレイヤーが移動するたびに、スプライト シートのいくつかの背景位置を循環するタイマーを開始したいと考えています。

ディレクティブでこれを行うと思いました。問題は、ディレクティブでは通常、監視する式を 1 つしか設定できないことです。

// "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

私の意見では、最も簡単で読みやすい解決策は、2つの属性を使用し、2つの時計を設定することです。

// "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 関数で関数を使用しようとします。

プランカーはこちら

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.$watch(function () {
  return [attrs.test, attrs.test-two];
}, function(value) {
      // do something when it changes
}, true);

このリンクを参照してください

$watchGroupを使用することもできます-このリンクを参照してください

于 2015-12-06T16:32:02.803 に答える
1

これにはいくつかの回避策があります

複数の $scope 属性を監視する

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

于 2012-11-11T04:47:52.117 に答える