javascript - AngularJS 指令中的两个绑定(bind)

Question

问题:我有一个 Controller ，它获取一组玩家，并将它们呈现给用户。这些玩家有一组统计数据，用户可以增加或减少这些数据，因为玩家可以有多个统计数据，我希望他们表现相同，所以我创建了一个指令，它有一个数字和 2 个按钮“+”& “-”。当用户单击“+”时，该值应该上升，当用户单击“-”时，该值应该下降。该指令的目标是使调整模板变得容易，并使其随处可见，该指令还试图与统计无关，这样它就可以重新用于多个不同的统计。用户可以有 selectedPlayer，此指令将绑定(bind)到此 selectedPlayer 的统计信息。我遇到的问题是，如果我更改 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
},

},

更新

控制台转储:

Answer 1

关键问题隐藏在这里:

...
ctrl.statValue = $scope.data;
...

这是在 Controller 构建阶段发生的声明。 IE。 $scope.data 在那一刻可能为空...所以我们不分配对以后数据的引用...只是分配了一个 NULL(或未定义):

// these is two way binding - but no could empty $scope.data
// it is like doing this

ctrl.statValue = null; // no reference

有an example在父 Controller 中加载异步数据(超出指令)

  .directive('statVal', function()
  {
    return {
        restrict: 'E',
        templateUrl: 'templates/statValue.html',
        //transclude:true,
        scope: {
            data: "=",
            // ...
        },
        controllerAs: 'statCtrlr',
        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;
        }],
    };
  })

.controller("myCtrl", function($scope, $http) {
  $http.get("data.json")
    .then(function(response){
      $scope.data = response.data;
    })
})

我们该如何解决？最简单的是使用“.”。在模型名称中，使用 Model : { data }

有updated example

Controller 创建模型

.controller("myCtrl", function($scope, $http) {
  $scope.Model = {};
  $http.get("data.json")
    .then(function(response){
      $scope.Model.data = response.data;
    })
})

然后传递给指令

<stat-val model="Model"></stat-val> 

指令现在将模型分配给它的 Controller

  .directive('statVal', function()
  {
    return {
        restrict: 'E',
        templateUrl: 'templates/statValue.html',
        //transclude:true,
        scope: {
            Model: "=model",
            // ...
        },
        controllerAs: 'statCtrlr',
        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;
            ctrl.Model = $scope.Model;
        }],
    };
  })

查一下here

另一种方法是观察原始数据......直到它们真正到达指令，然后将它们分配给 Controller ......但我试图解释发生了什么，上面的例子更准确

注意:我只使用 JavaScript 作为示例，因为这里的问题与 Typescript 无关