如何将`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。希望它能帮助你。