使用隔离范围时转换角度指令模板

Question

我正在编写一个自定义指令来生成一个下拉元素。如果我使用隔离范围，编译函数不会转换模板。

大多数情况下，我正在更改 select 元素上的 ng-options，因为它们在指令中提供。我如何在隔离范围内实现相同的目标？

myApp.directive('helloWorld', function () {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      id:'@',
      label:'@'
    },
    template: '<div class="control-group">' +
                '   <label for="{{id}}" class="control-label">{{label}}</label>' +
                '   <div class="controls">' +
                '       <select id="{{id}}" class="medium m-wrap">' +
                '       </select>' +
                '   </div>' +
                '</div>',
  },
  compile:function(tElement, tAttrs, transclude){
   var opts = tAttrs.textField 
    ?'item.' + tAttrs.textField + (tAttrs.groupBy ? ' group by item.' + tAttrs.groupBy : '') + ' for item in ' + tAttrs.itemSource
    :'item for item in ' + tAttrs.itemSource;

    tElement.find('select').attr('ng-options',opts);
  }
});

Answer 1

问题是{{label}} 不存在于隔离范围内。您可以通过将对父范围的引用传递给指令中的隔离范围来解决此问题：

   return {
       restrict: 'E',
       replace: true,
       scope: {
           id:'@',
           label:'@'
       },
       // in the directive!
       controller : function($scope){
           $scope.label = $scope.$parent.label;
       }

但是，这不是一个可取的范例。因为这意味着您的指令可以侦听的唯一数据是“命名”。所以最好使用一个属性，（这看起来像你正在做的）。所以...

 // in the directive!
 controller : function($scope, $attrs){
    $scope.$parent.$watch($attrs.itemSource, function(itemSource){
        $scope.itemSource = itemSource;
    });
 }

类似的东西。