返回前的角度指令范围

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); 
      }); 
    } 
    }; 
});