角不自定义指令内部编译

Question

我有一个指令，看起来像这样：

app.directive('fieldsetCollapse', function() { 
return { 
    restrict: 'A', 
    scope: {}, 
    compile: function(tElement, tAttrs, transclude) { 
     var wrapperElement = angular.element('<div ng-show="isOpen"></div>'), 
      legendElement = tElement.find('legend'), 
      collapsibleContent = tElement.children().not('legend'), 
      toggleBtn = angular.element('<a href="#" class="twisty" ng-class="{ true: \'twisty-open\', false: \'twisty-closed\' }[isOpen]" ng-click="toggle()"></a>'); 

     legendElement.css('cursor', 'pointer') 
         .attr('ng-click', 'toggle()'); 

     tElement.css({ 
      'position': 'relative', 
      'marginLeft': '20px' 
     }); 
     tElement.prepend(toggleBtn); 

     angular.forEach(collapsibleContent, function(obj, i) { 
      $(obj).remove(); 
      wrapperElement.append(obj); 
     }); 

     tElement.append(wrapperElement); 

     return function(scope, element, attrs) { 
      var directiveValue = (scope.$eval(attrs.gaigCollapsibleFieldset)); 
      scope.isOpen = (directiveValue == undefined) ? true : directiveValue; 

      scope.toggle = function() { 
       scope.isOpen = !scope.isOpen; 
      } 

     } 
    } 
} 

}）;

，与此标记的工作原理：

<fieldset fieldset-collapse> ... </fieldset> 

如果我尝试添加任何东西里面<字段集>像这样：

<fieldset fieldset-collapse>{{foo}}</fieldset> 

...其中foo是在我的控制范围定义，输出是

{{foo}} 

Angular not com堆积我在标签和指令之间添加的任何东西。我是否在我的指令中错过了某些内容？

Answer 1

你正在创建的指令定义对象

return { 
    restrict: 'A', 
    scope: {} // <--- isolated scope 
} 

一个孤立的范围这意味着您的指令没有访问父范围，其中foo所在的价值。

只是评论它。 例http://jsfiddle.net/jaimem/RE7Jj/1/

如果你不想指令可以完全访问您可以设置双向局部范围的财产foo和家长的foo之间结合父范围。文档中的更多详细信息：http://docs.angularjs.org/guide/directive