AngularJS

Question

我想知道 - 如何使用动态模板制作 Directive。问题是 - 当我在主页和主要类别如 page1 或 page2 时，我的模板应该包含所有 divs

当我在 subpage1 或 subpage2 等子菜单上时，我只想显示 3 divs。如何动态实现呢？我知道我必须在每个子页面上使用我的指令

<my-template whereIam="page1"></my-template> 或 <my-template whereIam="subpage2"></my-template>

但是我做不到。你能帮帮我吗？

我的示例模板指令：

angular.module('dynamic-template').directive('myTemplate', function () {
    return {
        restrict: 'E',
        template: "<div1> "
                    + "<h1> Main pages and subpages </h1>"
                + "</div1>"
                + "<div2>"
                    + "<h2> Main pages and subpages </h2>"
                + "</div2>"
                + "<div3>"
                    + "<h3> Main pages and subpages </h3>"
                + "</div3>"
                + "<div4>"
                    + "<h4> Only mainpages </h4>"
                + "</div4>"
                + "<div5>"
                    + "<h5> Only subpages </h5>"
                + "</div5>"                     
    };
}]);

HTML 在其中一个页面上：

<my-template whereIam="??" ></menu-template>

Plunkr 示例

http://plnkr.co/edit/kVk3mJWUbTqhFEHVUjt1?p=preview

我搜索过这个，但我迷路了:(

我有没有使用 $compile 来实现它？

Answer 1

*注意：我个人更喜欢将模板放在单独的文件中（使用 templateUrl）

不过……

你可以通过页面的page-type，使用ng-if的。

angular.module('dynamic-template').directive('myTemplate', function () {
return {
    restrict: 'E',
    scope: { isMain: "=main"},
    template: "<div1> "
                + "<h1> Main pages and subpages </h1>"
            + "</div1>"
            + "<div2>"
                + "<h2> Main pages and subpages </h2>"
            + "</div2>"
            + "<div3>"
                + "<h3> Main pages and subpages </h3>"
            + "</div3>"
            + "<span ng-if='isMainPage'><div4>"
                + "<h4> Only mainpages </h4>"
            + "</div4>"
            + "<div5>"
                + "<h5> Only mainpages </h5>"
            + "</div5></span>"                     
};
}]);

并在您的 html（当它是主页时）

<my-template main="true"/>

否则，我对类似问题的回答可能适合你：

这种方法确实需要您为每个文件创建单独的 html 文件

See other Whosebug answer

或直接使用 Plunkr

Plunkr

app.directive('myDirective', [function(){

return {
    template: '<div ng-include="getTemplate()"></div>',
    restrict: 'E',
scope: {template: '='},
link: function(scope, element, attr, ctrl) {
  var baseURL = 'templates/myDirective.'

  scope.getTemplate = function(){
      baseURL = "" //remove this
      return baseURL + scope.template + ".html"
    };
}
};
}]);

Answer 2

为什么不像 rmuller 所说的那样使用模板 URL，但你可以传入参数和 return 正确的模板示例

templateUrl: function (elem, attrs) {
                if (attrs.isMain === 'mainPage') {
                    return 'main_view.html';
                }
                return 'other_view.html';
            },

因此，您会将模板分离到文件中。我认为这是我个人认为的最佳方式

AngularJS - 带有动态模板的指令

AngularJS - directive with dynamic template

javascript

templates

directive

dynamic