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>

这是指令在屏幕上的样子

我正在做的是基于所选的周，我正在显示一些基于该范围变量的数据。发生的事情是，当触发指令监视时，页面上的所有指令都会被更新，因此每个指令都包含相同的数据。我开始阅读隔离范围，但我很难用我需要的手表连接它。

Answer 1

使用范围：true

作为

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

它将从父级继承但不会反映从父级返回到指令的任何更改。

Answer 2

问题是vm.selectedWeek是作为week共享的。因此，在其中一个指令中触发的更改肯定会在其他指令中触发监视。因此，虽然您将值更改为1，但更改得到了反映。尝试使用bindings属性并将其设置为

 var directive = {
...
...
 bindings:{
   week: '<'
...
  }

这将确保只有单向绑定

此外，不要使用attrs.week，而是尝试直接从控制器范围使用周。如果这有帮助，请标记为答案。

使用$ watch隔离范围

2 个答案: