Isaac Levin Isaac Levin - 1 month ago 22
AngularJS Question

Isolate Scope with $watch

I have a custom directive that I am going to put on a page multiple times

<div id="upcomingweekssubnav" style="text-align:center">
<div style="width:100%">
<div style="width: 50%; float:left">
<h4>Week:</h4>
<ul class="weeks">
<li ng-model="vm.selectedWeek" ng-repeat="n in vm.range(vm.selectedLeague.StartWeek,vm.selectedLeague.EndWeek)">
<span ng:click="vm.setWeeklyLineup(n)">{{n}}</span>
</li>
</ul>
</div>
</div>
</div>
<br /><br />
<div id="my-team-lineup" ng-show="vm.showMe" style="text-align:center">
<div id="myteamDiv" style="width:100%; overflow:hidden;">
<div id="myTeamBeforeDiv" style="width:50%; float: left;">
<center>
<h4>Before Trade</h4>
<div ng-lineup week="vm.selectedWeek" lineup="vm.myBeforeTradeLineup"></div>
</center>
</div>
<div id="myTeamAfterDiv " style="width:50%; float: right ">
<center>
<h4>After Trade</h4>
<div ng-lineup week="vm.selectedWeek" lineup="vm.myAfterTradeLineup"></div>
</center>
</div>
</div>
</div>
<div id="thier-team-lineup" ng-show="!vm.showMe" style="text-align:center">
<div id="thierteamDiv" style="width:100%; overflow:hidden;">
<div id="thierTeamBeforeDiv" style="width:50%; float: left">
<center>
<h4>Before Trade</h4>
<div ng-lineup week="vm.selectedWeek" lineup="vm.thierBeforeTradeLineup"></div>
</center>
</div>
<div id="thierTeamAfterDiv " style="width:50%; float: right ">
<center>
<h4>After Trade</h4>
<div ng-lineup week="vm.selectedWeek" lineup="vm.thierAfterTradeLineup"></div>
</center>
</div>
</div>
</div>


ng-lineup is the directive name, here is the javascript and template file

app.directive('ngLineup', function () {
var directive = {
link: function (scope, elem, attrs) {
scope.week = null;
scope.$watch(attrs.week, function (data) {
var myBefore = scope.$eval(attrs.lineup);
if (myBefore !== undefined) {
myBefore.forEach(function (element) {
if (element.Week === data) {
var roster = element.Roster;
element.Roster.forEach(function (player) {
if (player.WeeklyMatchups[data] !== undefined) {
player.WeekProjections = player.WeeklyMatchups[data].WeekProjections;
player.Opponent = player.WeeklyMatchups[data].Opponent;
}
}, this);

scope.lineup = roster;
scope.pointsTotal = element.ProjectedPoints;
}
}, this);
}
});
},
restrict: 'AE',
priority: 10,
templateUrl: '/app/templates/lineup.html',
};
return directive;
});


Template

<div class="tableRow header blue" id="statTable0">
<div class="cell">Pos</div>
<div class="cell">Players</div>
<div class="cell">Opp</div>
<div class="cell">Proj Pts</div>
</div>
<div class="tableRow" ng:repeat="e in lineup">
<div class="cell">
{{e.Name == "" ? 'No Player Available' : e.Name}}
</div>
<div class="cell">
{{e.Position.Abbreviation.indexOf("_") > -1 ? "FLEX" : e.Position.Abbreviation }}
</div>
<div class="cell">
{{e.Opponent}}
</div>
<div class="cell">
{{vm.selectedWeek == e.ByeWeek[0] ? 'BYE' : e.WeekProjections}}
</div>
</div>
<br />
<h4>Week {{vm.selectedWeek}} Projected Total (Before Trade): {{vm.myBeforeWeekProjectedPoints}}</h4>


And here is what the directive looks like on the screen

enter image description here

What I am doing is based on the selected Week, I am showing some data that is based off that scope variable. What is happening is that when the directive watch is triggered, all the directives on the page are being updated, so each one has the same data in it. I started reading on isolated scope, but I am having a hard time being able to wire that up with the watch that I need.

Answer

use scope:true

as

 var directive = {
  scope:true;
    link: function (scope, elem, attrs) {

it will inherit from parent but won't reflect back any changes made from parent back to directive.