11

だから私のHTMLで私はこのようなものを持っているとしましょう:

<tabcontent></tabcontent>

次に、このディレクティブの JavaScript は次のとおりです。

tabsApp.directive('tabcontent', function(){

  var myObj = {
    priority:0,
    template:'<div></div>',
    replace: true,
    controller: 'TabCtrl',
    transclude: false,
    restrict: 'E',
    scope: false,
    compile: function (element, attrs){
      return function (parentScope, instanceEle){
        parentScope.$watch('type', function(val) {
          element.html('<div '+val+'></div>');
        });
      }
      $compile(parentScope);
    },
    link: function postLink(scope, iElement, iAttrs){}
  };
  return myObj;

});

HTML は適切に解析され、type の値はコントローラ JS で見つかります。

so <tabcontent></tabcontent> is replaced with <div recipe></div> for example..

（その部分はきちんと起こります）

したがって、レシピのディレクティブもあります。

tabsApp.directive('recipe', function(){

  var myObj = {
    priority:0,
    template:'<div>TESTING</div>',
    replace: true,
    controller: 'TabCtrl',
    transclude: false,
    restrict: 'E',
    scope: false,
    compile: function (element, attrs){
      return {
        pre: function preLink(scope, iElement, iAttrs, controller){},
        post: function postLink(scope, iElement, iAttrs, controller){}
      }
    },
    link: function postLink(scope, iElement, iAttrs){}
  };
  return myObj;

});

これは明らかに非常に単純で、テスト用です。しかし、レシピ ディレクティブは処理されていません...

何が起きてる？

4

1 に答える 1

19

次の 2 点を変更する必要があります。

  1. ディレクティブはE (要素)に制限されてはrecipeなりません。のようなディレクティブを生成する場合は、ディレクティブ構成のプロパティに少なくともA (属性) を追加する必要があります。<div recipe></div>restrict

    app.directive('recipe', function() {
   return {
      restrict: 'E',
      ...

  2. tabcontent'watch' の後にディレクティブの HTML コンテンツをコンパイルする必要があります。

    app.directive('tabcontent', function($compile){
   return {    
   ...    
   link: function (scope, iElement, iAttrs) {
            scope.$watch('type', function(val) {
               iElement.html('<div '+val+'></div>');           
               $compile(iElement.contents())(scope);         
             });
         }
   ...

jsFiddle : http://jsfiddle.net/bmleite/n2BXp/

于 2013-01-28T14:28:06.167 に答える