Question

问题：我有一个控制器，可以获得一系列玩家，并将它们呈现给用户。这些玩家有一组统计数据，然后用户可以增加或减少，因为玩家可以拥有多个统计数据，并且我希望它们的行为相同，所以我创建了一个带有数字和2个按钮的指令。 +＆＃34; ＆安培; ＆＃34; - ＆＃34 ;.当用户点击＆＃34; +＆＃34;当用户点击＆＃34; - ＆＃34;时，该值应该会上升价值应该下降。该指令的目标是使调整模板变得容易，并且在任何地方反映出来，该指令也试图与统计无关，这样它可以重复用于几个不同的统计数据。用户可以拥有selectedPlayer，此指令将绑定到此selectedPlayer上的stat。我遇到的问题是，如果我更改了selectedPlayer，指令似乎没有使用新的selectedPlayer进行更新，或者指令中的新值似乎并没有真正更新所选择的播放器。

代码可能有助于更好地解释这一点。

<div class="h3 text-center">{{title}}</div>
<button class="btn btn-lg plusMinus-btn btn-danger" ng-click="statCtrlr.statDown()">-</button>
<span class="stat-val digits md vcenter text-center" style="width: 50px;" ng-cloak>{{statCtrlr.statValue}}</span>
<button class="btn btn-lg plusMinus-btn btn-success" ng-click="statCtrlr.statUp()">+</button>

js（.ts实际上）文件：

var app = angular.module("stat-val", []);

app.directive("statVal", () => {

    return {
        restrict: 'E',
        templateUrl: 'templates/statValue.html',
        //transclude:true,
        scope: {
            title: "@",
            data: "=" 
            //prop:"="
            //statValue: "=val",
            //statCol: "@col",
            //plrid: "@plrid",
            /*plr:"=plr"*/
        },
        controller: ['$scope', '$http', function ($scope, $http) {
            //$scope.statValue
            var ctrl = this;

            //ctrl.statValue = $scope.data[$scope.prop];
            console.log("$scope", $scope);


            ctrl.statValue = $scope.data;

            console.log('stat-val::$scope', $scope.data, $scope, ctrl.statValue);
            //console.log($scope.$parent.entryCtrlr.selectedPlayer.plrid);


            this.statDown = () => {
                console.log("statDown", ctrl.statValue);
                if (ctrl.statValue > 0) {
                    ctrl.statValue--;

                }
            };

            this.statUp = () => {
                console.log("statUp", ctrl.statValue);
                ctrl.statValue++;

            };
        }],
        controllerAs: 'statCtrlr'
    }
});

如何在html中调用它

<div class="col-xs-3 no-gutter">
     <stat-val title="FGM" data="entryCtrlr.selectedPlayer.stats.fgm" prop="fgm"
     ></stat-val>
</div>

使用的json数据：

player: [
{
 stats: {
  fgm: 0,
  fga: 0,
  fgm3: 0,
  fga3: 0,
  ftm: 0,
  fta: 0,
  tp: 0,
  blk: 0,
  stl: 0,
  ast: 0,
  min: "",
  oreb: 2,
  dreb: 4,
  treb: 6,
  pf: 0,
  tf: 0,
  to: 0
},

},

更新

console dump：

Answer 1

您的$scope.data是双向绑定，而不是ctrl.statValue：

this.statDown = () => {
    console.log("statDown", $scope.data);
    if ($scope.data > 0) {
        $scope.data--;
    }
};

this.statUp = () => {
   console.log("statUp", $scope.data);
   $scope.data++;
};

AngularJS指令中的两个绑定

1 个答案: