嵌套指令

我有兩個指令，一個是翻譯字符串，另一個是用標題創建一個容器。（以及除去一些其它功能，以使示例短）嵌套指令

GROUPBOX：

myapp.directive('groupbox', function() { 
    return { 
     restrict: 'E', 
     priority: 200, 
     template: 
      '<fieldset>' + 
      '<legend data-translate>{{title}}</legend>' + 
      '<div data-ng-transclude></div>' + 
      '</fieldset>', 
     transclude: true, 
     replace: true, 
     scope: {title: '@'} 
    }; 
});

翻譯：（也被簡化）

myapp.directive('translate', ['$filter', function ($filter) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      var e = $(element); 
      var data = attrs.translate; 

      var results = $filter('I')(e.html(), data); 
      e.html(results.text); 
      if (results.tooltip) e.attr('data-tooltip', results.tooltip); 
     } 
    }; 
}]);

我使用這樣的：

<groupbox title='settings'> 
    content 
</groupbox>

這個想法是，「groupbox」的內容被放入div和「legend」中的標題中。在此之後，圖例需要通過translate指令進行翻譯。這種翻譯不會發生（它只是打印設置）。當我用'設置'替換'{{title}}'時，它會被翻譯。

我怎樣才能得到翻譯指令對groupbox指令的結果進行操作。

來源

2013-01-22 martijnve

你可以共享普拉克或用的jsfiddle正在運行的例子嗎？ – remigio

'element'已經是一個包裝的jQuery元素（如果您在包含Angular之前包含了jQuery）或包裝的Angular [jqLite]（http://docs.angularjs.org/api/angular.element）元素。 html（）和attr（）是jqLite的一部分，因此您可能不需要jQuery來處理鏈接函數中的操作。所以，你可以刪除這行：'var e = $（element）'並且只使用'element'。 –

'var data = attrs.translate;'可能會返回'undefined'，因爲您的groupbox指令沒有爲data-translate屬性設置值。也許嘗試' {{title}}' –

我通過添加一個將標題直接放入圖例（無需綁定）的編譯函數來修復它。這種方式與其他任何使用我的translate指令沒有區別。

myapp.directive('groupbox', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     template: 
      '<fieldset>' + 
       '<legend>' + 
        '<span data-translate></span> - ' + 
        '<a data-ng-click="open = !open" data-translate>toggle</a>' + 
       '</legend>' + 
       '<div data-ng-show="open" data-ng-transclude></div>' + 
      '</fieldset>', 
     compile: function(element, attrs) { 
      element.children('legend').children('span').html(attrs.title); 
     } 
    }; 
});

來源

2013-01-25 10:55:48 martijnve

回答

相關問題