兩個指令引用一個變量，但第二個指令不引發變化

Question

我有兩個引用相同的父變量的指令。第一條指令是一個下拉菜單。第二個指令是一個表。我試圖完成的是這樣的：當在下拉菜單上進行選擇時，父變量將會改變。使用$ scope。$ watch的第二條指令將檢測到這一更改並將數據加載到表中。問題是第二個指令沒有檢測到變化。我不明白爲什麼。

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

JS -

// home.js 
    (function() { 
     'use strict'; 

     angular 
      .module(testConstants.generateName(testConstants.appModule, testConstants.NAMETYPES.module)) 
      .controller(testConstants.generateName('home', testConstants.NAMETYPES.controller), home); 

     home.$inject = ['$scope', '$location', '$routeParams', '$q', '$window', 'logger', 'dataservice']; 

     function home($scope, $location, $routeParams, $q, $window, logger, dataservice) { 

      var home = this; 

      home.changevalue = ''; 
     } 
    })(); 


// search.js 
(function() { 
    'use strict'; 

    angular 
     .module(testConstants.generateName(testConstants.appModule, testConstants.NAMETYPES.module)) 
     .directive(testConstants.generateName('directiveOne', testConstants.NAMETYPES.directive), searchFoodItems); 

    searchFoodItems.$inject = ['dataservice', 'logger']; 
    function searchFoodItems(dataservice, logger) { 

     var sfi = { 

      restrict: 'E', 
      templateUrl: 'App/search/search.directive.html', 
      scope: { 
       fooditemid: '=' 
      }, 
      link: function (scope, element, attrs, controller) { }, 
      controller: searchFoodItemsController, 
      controllerAs: 'searchFoodItems' 
     } 

     return sfi; 
    } 

    searchFoodItemsController.$inject = ['$scope', 'dataservice', 'logger']; 
    function searchFoodItemsController($scope, dataservice, logger) { 

     var search = this; 

     search.fooditemid = ''; 
     search.fooditems = []; 
     search.onSelectionChange = function() { 
      $scope.fooditemid = search.fooditemid; 
     } 

     activate(); 

     function activate() { 
      loadFoodItems(); 
     } 

     function loadFoodItems() { 

      return dataservice.getFoodItems().then(function (result) { 
       search.fooditems = result; 
       logger.log("search.directive.js = getFoodItems loaded"); 
      }); 
     } 
    } 

})(); 


// list.js 
(function() { 
    'use strict'; 

    angular 
     .module(testConstants.generateName(testConstants.appModule, testConstants.NAMETYPES.module)) 
     .directive(testConstants.generateName('directiveTwo', testConstants.NAMETYPES.directive), listFoodItems); 

    listFoodItems.$inject = ['dataservice', 'logger']; 
    function listFoodItems(dataservice, logger) { 

     var lfi = { 

      restrict: 'E', 
      templateUrl: 'App/list/list.directive.html', 
      scope: { 
       fooditemid: '=' 
      }, 
      link: function (scope, element, attrs, controller) { }, 
      controller: listFoodItemsController, 
      controllerAs: 'listFoodItems' 
     } 

     return lfi; 
    } 

    listFoodItemsController.$inject = ['$scope', '$q', 'dataservice', 'logger']; 
    function listFoodItemsController($scope, $q, dataservice, logger) { 

     var list = this; 

     list.fullitemdescs = []; 

     activate(); 

     function watchFoodItem() { 

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

     function activate() { 
      watchFoodItem(); 
      load($scope.fooditemid); 
     } 

     function load(id) { 
      if (id === '') { 
       loadFoodItems(); 
      } 
      else { 
       loadFoodItem(id); 
      }    
     } 

     function loadFoodItems() { 

      return dataservice.getFoodDescDiscs().then(function (result) { 
       list.fullitemdescs = result; 
       logger.log("list.directive.js = getFoodItems loaded"); 
      }); 
     } 

     function loadFoodItem(id) { 

      return dataservice.getFoodDescDisc(id).then(function (result) { 
       list.fullitemdescs = result; 
       logger.log("list.directive.js = getFoodItem loaded"); 
      }); 
     } 
    } 

})(); 

Answer 1

去除功能和觀察家$範圍。

//function watchFoodItem() { 

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