Zwei Direktiven, die auf eine Variable verweisen, aber die zweite Direktive wird bei Änderung nicht ausgelöst

Question

Ich habe zwei Direktiven, die auf dieselbe Elternvariable verweisen. Die erste Richtlinie ist ein Dropdown. Die zweite Richtlinie ist eine Tabelle. Was ich erreichen möchte, ist folgendes: Wenn eine Auswahl im Dropdown-Menü getroffen wird, ändert sich die übergeordnete Variable. Die zweite Anweisung, die $ scope. $ Watch verwendet, erkennt diese Änderung und lädt die Daten in die Tabelle. Problem ist, dass die zweite Direktive die Änderung nicht erkennt. Ich verstehe nicht warum.

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

Remove-Funktion und $ Umfang von Watcher.

//function watchFoodItem() { 

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