AngularJS Two Binding In Directive
Problem: I have a controller that gets an array of players, and presents them to the user. These player have a set of stats that a user can then incremented or decremented, since a player can have multiple stats, and I want them to behave the same, so I am creating a directive that has a number and 2 buttons "+" & "-". When the user clicks "+" the value should go up, when the user clicks "-" the value should go down. The goal with this directive is to make it easy to tweak the template and have that reflected everywhere, the directive is also trying to be stat agnostic, that way it can be re-used for several different stats. The user can have selectedPlayer, this directive will be bound to a stat on this selectedPlayer. The issue I am running into is if I change the selectedPlayer the directive doesn't seem to update with the new selectedPlayer, or the new value from the directive doesn't seem to actually update the selected player.
Code may help explain this better.
<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>
the js (.ts actually) file:
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'
}
});
how is its being called in html
<div class="col-xs-3 no-gutter">
<stat-val title="FGM" data="entryCtrlr.selectedPlayer.stats.fgm" prop="fgm"
></stat-val>
</div>
The json data that gets used:
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
},
},
Update
console dump:
Answer
Your $scope.data
is two-way binded, not ctrl.statValue
:
this.statDown = () => {
console.log("statDown", $scope.data);
if ($scope.data > 0) {
$scope.data--;
}
};
this.statUp = () => {
console.log("statUp", $scope.data);
$scope.data++;
};
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM