Javascript 带有动态控制器和模板的AngularJs指令

我想创建一个具有动态视图和动态控制器的指令。控制器和模板视图来自服务器

指令

var DirectivesModule = angular.module('BPM.Directives', []);
(function () {
    'use strict';

    angular
        .module('BPM.Directives')
        .directive('bpmCompletedTask', bpmCompletedTask);

    bpmCompletedTask.$inject = ['$window'];

    function bpmCompletedTask ($window) {
        // Usage:
        //     <bpmCompletedTask></bpmCompletedTask>
        // Creates:
        // 
        var directive = {
            link: link,
            restrict: 'E',
            scope: {
                type: '=',
                taskdata: '=',
                controllername:'@'
            },
            template: '<div ng-include="getContentUrl()"></div>',
            controller: '@',
            name: 'controllername'
            };
        return directive;

        function link(scope, element, attrs) {
            scope.getContentUrl = function () {
                return '/app/views/TasksViews/' + scope.type + '.html';
            }
            scope.getControllerName = function ()
            {
                console.warn("Controller Name is " + scope.type);
                return scope.type;
            }
        }
    }

})();

第二条指令

angular
.module('BPM.Directives')
.directive('bpmCompletedTaskInner',['$compile', '$parse',
function ($window, $compile, $parse) {
    console.warn('in the second directive');
    return {
        link: function (scope, elem, attrs) {
            console.warn('in the second directive');
            scope.getContentUrl = function () {
                return '/app/views/TasksViews/' + scope.type + '.html';
            }
        },
        restrict: 'A',
        scope: {
            type: '=',
            taskdata: '=',
            controllernameinner: '@'
        },
        template: '<div ng-include="getContentUrl()"></div>',
        controller: '@',
        name: 'controllernameinner'
    };

}]);

angular
.module（'BPM.Directives'）
.directive（'bpmCompletedTaskInner'，['$compile'，'$parse'，
函数（$window、$compile、$parse）{
console.warn（'在第二条指令中'）；
返回{
链接：功能（范围、要素、属性）{
console.warn（'在第二条指令中'）；
scope.getContentUrl=函数（）{
返回'/app/views/TasksViews/'+scope.type+'.html'；
}
},
限制：“A”，
范围：{
类型：“=”，
taskdata:“=”，
控制器名称：“@”
},
模板：“”，
控制器：“@”，
名称：'controllernameinner'
};
}]);

Html文件

 <div ng-repeat="workflowStep in CompletedWorkflowSteps">
        <div bpm-completed-task controllername="workflowStep.WorkflowTaskType.DataMessageViewViewName" taskdata="workflowStep.WorkflowTaskOutcome.TaskOutcome"
                            type="workflowStep.WorkflowTaskType.DataMessageViewViewName">
        </div>
    </div>

---

更新：

(function () {
    'use strict';

    angular
        .module('BPM.Directives')
        .directive('bpmCompletedTask', bpmCompletedTask);

    bpmCompletedTask.$inject = ['$compile', '$parse'];

    function bpmCompletedTask ($compile, $parse) {
        var directive = {
            link: function (scope, elem, attrs) {
                console.warn('in the first directive - before if');
                if (!elem.attr('bpm-completed-task-inner'))
                {
                    console.warn('in the first directive');
                    var name = $parse(elem.attr('controllername'))(scope);
                    console.warn('Controller Name : ' + name);
                    elem = elem.removeAttr('bpm-completed-task');
                    elem.attr('controllernameinner', name);
                    elem.attr('bpm-completed-task-inner', '');
                    $compile(elem)(scope);
                }
            },
            restrict: 'A',
            };
        return directive;        
    }

})();

我让它工作了，但它真的很难看。检查：

您的示例中有很多移动的片段，因此这一个很简单，但它满足您的需要

基本上，您需要一个包装器指令，该指令接受JS对象并将其转换为字符串属性，然后您可以对其他所有内容（模板、范围等）使用您的指令

更新2:

(function () {
    'use strict';

    angular
        .module('BPM.Directives')
        .directive('bpmCompletedTask', bpmCompletedTask);

    bpmCompletedTask.$inject = ['$compile', '$parse'];

    function bpmCompletedTask ($compile, $parse) {
        var directive = {
            link: function (scope, elem, attrs) {
                console.warn('in the first directive - before if');
                if (!elem.attr('bpm-completed-task-inner'))
                {
                    console.warn('in the first directive');
                    var name = $parse(elem.attr('controllername'))(scope);
                    console.warn('Controller Name : ' + name);
                    elem = elem.removeAttr('bpm-completed-task');
                    elem.attr('controllernameinner', name);
                    elem.attr('bpm-completed-task-inner', '');
                    $compile(elem)(scope);
                }
            },
            restrict: 'A',
            };
        return directive;        
    }

})();

内联代码：

var-app=angular.module（'myApp'，[]）。
指令（'communicatorInner'，[“$parse”，“$compile”，
函数（$parse，$compile）{
返回{
限制：“A”，
模板：“
”，
范围：{
消息：'='
},
控制器：“@”
};
}
]).
指令（'communicator'，['$compile'，'$parse'，
函数（$compile，$parse）{
返回{
限制：'E'，
链接：功能（范围、要素）{
如果（！elem.attr（'communicator-inner'））{
变量名=$parse（elem.attr（'controller-name'））（作用域）；
elem=elem.removeAttr（'controller-name'）
元素属性（“内部通讯器”，名称）；
$compile（elem）（范围）；
}
}
};
}
]).
控制器（“PhoneCtrl”，函数（$scope）{
$scope.sendMsg=函数（）{
警报（$scope.message+“：通过电话Ctrl发送消息”）；
}
}).
控制器（“固定线路控制”，功能（$scope）{
$scope.sendMsg=函数（）{
警报（$scope.message+“：通过陆地线Ctrl发送消息”）；
}
})

谢谢您的回答，梅利吉。当控制器名称是对象值而不是纯文本时，问题就开始了。在您共享的示例中，假设控制器名称来自服务器，我将它们作为参数传递给指令。我想我可能已经发现了问题。在我的回答中查看更新否，仍然。请参见，指令正确接收值并开始搜索名为“workflowStep.WorkflowTaskType.DataMessageViewViewName”的控制器，但是这不是我的控制器，也不是他在计算此对象的值后搜索控制器的方法。我尝试了下面的

，但也不起作用是的，我又错了。你需要这样的东西：-我现在有一些工作，但将返回一个结合这两个例子谢谢你。我将等待你的贡献。