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

AngularJs Directive with dynamic Controller and template

本文关键字：AngularJs 指令 动态 动态控制 控制器      更新时间：2023-09-26

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

该指令 

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;
            }
        }
    }
})();

这是我尝试使用该指令的方式 

<div ng-controller="WorkflowHistoryController as vm">
    <h2>Workflow History</h2>
    <h3>{{Id}}</h3>
    <div ng-repeat="workflowStep in CompletedWorkflowSteps">
        <bpm-completed-task controllername="workflowStep.WorkflowTaskType.DataMessageViewViewName" taskdata="workflowStep.WorkflowTaskOutcome.TaskOutcome" type="workflowStep.WorkflowTaskType.DataMessageViewViewName">
        </bpm-completed-task>
    </div>    
</div>

现在的问题是，当指令获取控制器名称时，它会将其作为文本字符串而不是参数获取。

可行吗？如果不可行，使用其控制器创建动态视图并在ng-repeat中动态显示它们的最佳解决方案是什么？

谢谢

更新 20 1月 我刚刚更新了我的代码，以防有人对此感兴趣。所有的功劳都归@Meligy。

第一个指令：

(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;        
    }
})();

第二项指令

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'
    };
}]);

该网页

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

更新：

我让它工作，但它真的很丑。检查：

http://jsfiddle.net/p6Hb4/13/

你的例子有很多移动的部分，所以这个很简单，但可以做你想要的。

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

.

更新 2：

内联代码：

var app = angular.module('myApp', []).
directive('communicatorInner', ["$parse", "$compile",
  function($parse, $compile) {
    return {
      restrict: 'A',
      template: "<input type='text' ng-model='message'/><input type='button' value='Send Message' ng-click='sendMsg()'><br/>",
      scope: {
        message: '='
      },
      controller: '@'
    };
  }
]).
directive('communicator', ['$compile', '$parse',
  function($compile, $parse) {
    return {
      restrict: 'E',
      link: function(scope, elem) {
        if (!elem.attr('communicator-inner')) {
          var name = $parse(elem.attr('controller-name'))(scope);
          elem = elem.removeAttr('controller-name')
          elem.attr('communicator-inner', name);
          $compile(elem)(scope);
        }
      }
    };
  }
]).
controller("PhoneCtrl", function($scope) {
  $scope.sendMsg = function() {
    alert($scope.message + " : sending message via Phone Ctrl");
  }
}).
controller("LandlineCtrl", function($scope) {
  $scope.sendMsg = function() {
    alert($scope.message + " : sending message via Land Line Ctrl ");
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<div ng-app="myApp">
<div ng-init="test = {p: 'PhoneCtrl', l: 'LandlineCtrl' }">
  <communicator controller-name="test.p" message="'test1'"></communicator>
  <communicator controller-name="test.l"></communicator>
</div>
  
  
</div>

.

原创（现在无关紧要，但可以帮助其他相关问题）

是的，它应该有效。

使用 Angular 1.3 进行测试：

http://jsfiddle.net/p6Hb4/9/

要检查的事项：

  • 控制器是否已定义并添加到模块中？它行不通

    如果控制器只是一个全局函数，它将无法工作。它必须通过<myModule>.controller("<controllerName>", <functiion>) API 添加

  • ng-controller有效吗？只需将其添加到模板中即可

    同样，直接在指令外部使用 ng-controller 是否有效？

相关文章：