引用一个变量但第二个指令的两个指令不会触发更改

时间:2016-04-01 14:22:29

标签: javascript angularjs angularjs-directive angularjs-scope

我有两个引用相同父变量的指令。第一个指令是下拉列表。第二个指令是一个表。我想要完成的是:当在下拉列表中进行选择时,父变量将发生变化。使用$ scope。$ watch的第二个指令将检测此更改并将数据加载到表中。问题是第二个指令没有检测到变化。我不明白为什么。

 <dependency>
     <groupId>javax.servlet</groupId>
     <artifactId>servlet-api</artifactId>
     <version>2.5</version>
     <scope>provided</scope>
 </dependency>

JS -

// home.html
<div>
    <directive-one testid="home.changevalue"></directive-one>
    <br />
    <directive-two testid="home.changevalue"></directive-two>
</div>

// search.directive.html
<div style="margin-top:5px;margin-left:25px;">
    <div class="row" style="margin-bottom:10px;">
        <label for="searchoptions" style="margin-left:15px;">Food Items</label>
        <br />
        <select style="margin-left:15px;" name="searchoptions" id="searchoptions1" ng-model="searchFoodItems.fooditemid" ng-change="searchFoodItems.onSelectionChange()">
            <option value="">Select ...</option>
            <option ng-repeat="fooditem in searchFoodItems.fooditems" value="{{fooditem.entryid}}">{{fooditem.itemdesc}}</option>
        </select>
        &nbsp;&nbsp;&nbsp;
        <span>Food Item ID - {{searchFoodItems.fooditemid}}</span>
    </div>
</div>

// list.directive.html
<div style="margin-top:5px;margin-left:30px;">
    <table class="table table-responsive">
        <thead>
            <tr>
                <th>ID</th>
                <th>Description</th>
                <th>Discount</th>
            </tr>
        </thead>
        <tfoot></tfoot>
        <tbody>
            <tr ng-repeat="row in listFoodItems.fullitemdescs">
                <td>{{row.EntryId}}</td>
                <td>{{row.ItemDesc}}</td>
                <td>{{row.ItemDisc}}</td>
            </tr>
        </tbody>
    </table>
</div>

1 个答案:

答案 0 :(得分:0)

从观察者中删除功能和$ scope。

//function watchFoodItem() {

            $scope.$watch("fooditemid", function (value) {
                $q.all([load(value)]).then(function () { logger.log('list.directive.js - fooditemid changed'); });
            });
//        }