一个指令返回中有多种方法

我仅使用具有多种方法返回不同模板的一个指令为我的Web应用程序设置基本模板。

到目前为止,我所做的与我称为服务

的方式相同
  

服务

app.service('myService',function() {
    let path = "app/api/";

    return {
        getStudentInfo: () => {
            //Some Statement...
        }
    }
})

现在,以防我目前如何称呼指令。但似乎不起作用

  

指令

app.directive('baseTemplate',function() {
    let path = "app/templates/"; // my basetemplate path folder

    // I want to call specific methods returning the template I need.
    return {
        getcategory: () => {
            return {
                restrict: 'A',template: '<strong> HELLO WORLD! </strong>'
            }
        },getTable: () => {
            return: {
                restrict: 'A',template: '<table> SOME DATA! </table>'
            }
        }
    }
})

这就是我在调用指令时所做的

  

HTML

<div base-template.getcategory>
    //The Output should be <strong> HELLO WORLD! </strong>
</div>

<div base-template.getTable> 
    //The same as the above Out should <table> SOME DATA! </table>
</div>
freekoo 回答:一个指令返回中有多种方法

一个人可以这样:

<div base-template="getCategory">
    <!-- The Output should be --><strong> HELLO WORLD! </strong>
</div>

<div base-template="getTable"> 
    <!-- The same as the above Out should --><table> SOME DATA! </table>
</div>
app.directive('baseTemplate',function() {
    let path = "app/templates/"; // my basetemplate path folder

    return {
        restrict: 'A',template: function(tElem,tAttrs) {
            switch (tAttrs.baseTemplate) {
                case: "getCategory":
                   return `<strong> HELLO WORLD! </strong>`;
                case: "getTable":
                   return `<table> SOME DATA! </table>`;
                default:
                   return `<div>No Template Selected</div>`;
            }
        }
    }
})

template属性该函数接受两个参数tElementtAttrs并返回一个字符串值。

有关更多信息,请参见

本文链接:https://www.f2er.com/3139834.html

大家都在问