如何將`controllers`狀態傳遞給`directive`模板函數？

Question

根據當前頁面，我需要更改模板。我的問題是，如何通過頁面從controller到directives模板方法？

這裏是我的嘗試：

​​

Live Demo

UPDATE

我想這樣的，但仍然得到錯誤。將$route注入directive的正確方法是什麼？

Answer 1

您可以在您的指令聲明中調用$routeParams，以在template函數中使用它。

myApp.directive('galleryMenu', ['$routeParams', function($routeParams) { 
    return { 
     template: function() { 
      var page = $routeParams.page || 'homePage', // Define a fallback, if $routeParams doesn't have 'page' param 
       output; 

      switch (page) { 
       case "servicePage": 
        output = "<button>One Button</button><button>Two Button</button>"; 
        break; 

       default: 
       case "homePage": 
        output = "<button>One Button</button>"; 
        /* 
        NOTE: Or this other, it was confusing to tell which one to use 
        output = "<button>One Button</button><button>Two Button</button><button>Three Button</button>"; 
        */ 
        break; 
      } 

      return output; 
     }, 
     link: function(scope, element, attrs) { 
      /* ... */ 
     } 
    } 
}]); 

編輯1：

如果您正在使用從$routeParamsui-router開關$stateParams。

Answer 2

您需要從$ state.current獲取當前url，並且可以在templateProvider的幫助下傳遞給指令。

myApp.directive('galleryMenu', function() { 

    return { 

    templateProvider : getTemplate(template), //$scope.template need to pass 

    link : function (scope, element, attrs) { 

     console.log(scope.template); 

    } 

    } 

from getTemplate你可以返回$ state.current。希望它能幫助你。