Bir değişkene atıfta bulunan iki yönerge ancak ikinci yönerge değişiklikten etkilenmiyor

Question

Aynı üst değişkene başvuran iki yönergeye sahibim. İlk yönerge bir düşüştür. İkinci yönerge bir masadır. Yapmaya çalıştığım şey şudur: açılır menüde bir seçim yapıldığında, üst değişken değişecektir. $ Scope. $ Saatini kullanan ikinci yönerge bu değişikliği algılayacak ve verileri tabloya yükleyecektir. Sorun şu ki, ikinci yönerge değişikliği tespit etmiyor. Nedenini anlamadım.

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

Kaldır fonksiyonu ve izleyici gelen $ kapsamı.

//function watchFoodItem() { 

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