基于$watch动态生成指令

Question

我想根据 $watch 动态生成指令。这是我的代码，它只是记录服务对象的值：

  gasStation.directive('createMenuTree', ['customerType', function (customerType) {
    console.log(customerType.getCustomerType() + ' enterring a directive');
    var template;


    console.log(customerType.getCustomerType() + ' from directive');

    var linker = function(scope){console.log()}

    return {

        controller: ['$scope', function ($scope) {}],

        link: function(scope){
            scope.$watch(function(){
                console.log(customerType.getCustomerType() + ' watcher');
                if (customerType.getCustomerType() == 'REGULAR') {
                    template = 'dashboard/regular_dashboard.html';
                }
                if (customerType.getCustomerType() == 'BUSINESS') {
                    template = 'dashboard/business_dashboard.html';
                }
                return customerType.getCustomerType();
            });
        },

        templateUrl: template
    };
}]);

我是如何使用指令的：<create-menu-tree></create-menu-tree>

问题是：如何根据customerType.getCustomerType() 值设置templateUrl 变量？目前，template 的值未定义。

Answer 1

您可以在指令链接函数中使用$http服务根据客户类型动态获取html字符串，然后使用$compile将html字符串与您的范围绑定，最后将<create-menu-tree>内容替换为新编译的元素

gasStation.directive('createMenuTree', ['customerType', '$compile', '$http', 

function (customerType, $compile, $http) {
    return {
        restrict:'EA',
        template: '',
        scope:false,
        compile: function(){
            return {
               pre: function(scope, element, attr){

                   var templateUrl = '';

                   if (customerType.getCustomerType() == 'REGULAR') {
                      templateUrl = 'dashboard/regular_dashboard.html';
                   }
                   if (customerType.getCustomerType() == 'BUSINESS') {
                      templateUrl  = 'dashboard/business_dashboard.html';
                   }

                   $http.get(templateUrl).then(function(htmlString){
                        var templateEle = $compile(htmlString)(scope);
                        element.empty();
                        element.append(tempalteEle);
                   })

               },
               post: function(scope, element, attr){}
        }
    }
}]);