返回前的角度指令範圍

Question

在輸入指令返回之前，我需要訪問範圍變量。

我有一個指令，它返回一個選擇元素與每個卡車的選項。

<tc-vehicle-select label="Truck" selected="activeDailyLog.truck"></tc-vehicle-select> 

我需要使用所選值的指令把一個selected標記相應的選項元素。

.directive('tcVehicleSelect', function(localStorageService) { 
    /* Get a list of trucks for the organization and populate a select element for 
    the user to choose the appropriate truck. 
    */ 

    var trucks = localStorageService.get('trucks'); 
    var truckHtml; 

    for (var i = 0; i < trucks.length; i++) { 
    var truck = trucks[i]; 
    var injectText; 

    if(truck.description){ 
     injectText = truck.description 
    }else{ 
     injectText = 'truck ' + truck.id 
    } 

    truckHtml += '<option value="' + truck.id + '">' + injectText + '</option>' 
    } 

    return { 
     scope: { 
     label: '@', 
     active: '@' 
     }, 
     replace: true, 
     template: '<label class="item item-input item-select">' + 
       '<div class="input-label">{{label}}</div>' + 
       '<select ng-model="timeLog.truck"><option value="">None</option>' + truckHtml + 
       '</select></label>' 
    }; 
}); 

我把一切都在這個指令的工作，除了我卡上設置selected屬性的正確元素。如果我可以訪問傳入的selected變量，我可以通過插入到truckHtml中來實現，但是我沒有找到使用該變量的示例 - 只使用下面的變量塊中的變量。

任何想法？

更新：也想澄清一下，HTML中的activeDailyLog.truck有我正在尋找的正確值。

Answer 1

1. 將您的指令代碼放在link函數中是有意義的。

2. 要檢索指令中傳遞的範圍變量，請使用=雙向綁定到同一個對象。

代碼：

.directive('tcVehicleSelect', function(localStorageService) { 
    /* Get a list of trucks for the organization and populate a select element for 
    the user to choose the appropriate truck. 
    */ 
    return { 
     scope: { 
     selected: '=' 
     }, 
     replace: true, 
     template: '<label class="item item-input item-select">' + 
       '<div class="input-label">{{label}}</div>' + 
       '<select ng-model="timeLog.truck"><option value="">None</option>' + truckHtml + 
       '</select></label>', 
     link: function(scope, elem, attrs) { 
     var trucks = localStorageService.get('trucks'); 
     trucks.forEach(function(truck) { 
      var injectText; 
      if(truck.description){ 
      injectText = truck.description 
      } else { 
      injectText = 'truck ' + truck.id 
      } 

      truckHtml += '<option value="' + truck.id + '">' + injectText + '</option>' 
     } 

     // Access scope.selected here // 
     console.log(scope.selected); 
     } 
    }; 
}); 

還與Array.forEach()方法代替，因爲它似乎在這方面更相關！

Answer 2

指令和工廠在內部很少有區別。這裏最重要的是指令被緩存 - 你的代碼只運行一次，並且angular會在每次需要使用該指令時繼續使用它的返回值。

這就是說，你不能在指令聲明體內訪問範圍 - 如果你可以的話，它將是第一個指令的作用域，它的結果將被緩存，並用於所有其他地方，你會使用相同的指令。

我確實喜歡在返回之前構建選項的想法，假設您確信它在應用程序生命期間不會更改（因爲它可以爲您節省一些不必要的綁定）。然而，它通常是不正確的，所以我想整個邏輯，而進入一個編譯甚至鏈接功能：

.directive('tcVehicleSelect', function(localStorageService) { 

    return { 
     scope: { 
     label: '@', 
     active: '@' 
     }, 
     replace: true, 
     template: '<label class="item item-input item-select">' + 
       '<div class="input-label">{{label}}</div>' + 
       '<select ng-model="timeLog.truck"><option value="">None</option>' 
       '</select></label>', 
     link: function(scope, element) { 
       var trucks = localStorageService.get('trucks'), 
        select = element.find('select'); 
        option; 
       trucks.forEach(function(truck) { 
       option = angular.element('<option></option>'); 
       option.attr('value', truck.id); 
       option.html(truck.description || "truck" + truck.id); 
       if (truck.id === scope.selected.id) {     
        option.attribute('selected', 'selected'); 
       } 
       select.append(option); 
      }); 
    } 
    }; 
});