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

沿着这些方向的东西。

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

1 个答案: