javascript - 使用 $watch 隔离范围

Question

我有一个自定义指令，我将多次将其放在页面上

        <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是指令名称，这里是javascript和模板文件

    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;
});

模板

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

这是指令在屏幕上的样子

我所做的基于所选的周，我显示了一些基于该范围变量的数据。发生的情况是，当指令监视被触发时，页面上的所有指令都会被更新，因此每个指令都具有相同的数据。我开始阅读隔离示波器，但我很难将其与我需要的 watch 连接起来。

Answer 1

使用范围:true

作为

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

它将继承自父级，但不会将从父级所做的任何更改反射(reflect)回指令。