Chỉ thị AngularJs với Bộ điều khiển động và mẫu

Question

Tôi muốn tạo một chỉ thị có chế độ xem động với bộ điều khiển động. bộ điều khiển và khung nhìn mẫu đến từ máy chủ.

Chỉ thị

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

})(); 

đây làm thế nào tôi đang cố gắng sử dụng các chỉ thị

<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> 

Vấn đề bây giờ là khi chỉ thị được tên điều khiển nó làm cho nó như literal chuỗi không như một tham số.

Có thể thực hiện được không? nếu không thể thực hiện được, giải pháp nào tốt nhất để tạo chế độ xem động với bộ điều khiển và hiển thị chúng tự động trong ng-repeat?

Cảm ơn,

Cập nhật ngày 20 tháng 1 tôi chỉ cập nhật mã của tôi trong trường hợp nếu một ai quan tâm đến nó. Tất cả tín dụng đều chuyển sang @Meligy.

The First Chỉ thị:

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

})(); 

thứ hai Chỉ thị

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

}]); 

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> 

Answer 1

Cập nhật:

Tôi nhận được nó hoạt động, nhưng nó thực sự xấu xí. Kiểm tra:

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

dụ của bạn có rất nhiều mảnh di chuyển, vì vậy cái này rất đơn giản, nhưng những gì bạn muốn. Về cơ bản bạn cần một chỉ thị bao bọc lấy đối tượng JS và chuyển đổi thành một thuộc tính chuỗi, sau đó bạn có thể sử dụng هى chỉ thị của bạn cho mọi thứ khác (mẫu, phạm vi, v.v ...).

.

Cập nhật 2:

Mã Inline:

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>

.

gốc (không liên quan bây giờ nhưng có thể giúp các vấn đề liên quan khác)

Có, nó sẽ làm việc.

Một thử nghiệm với góc 1.3:

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

Những điều cần kiểm tra:

• là bộ điều khiển xác định và thêm vào các module? Nó sẽ không hoạt động

  Nếu bộ điều khiển chỉ là một chức năng toàn cục, nó sẽ không hoạt động. Nó phải được thêm vào qua <myModule>.controller("<controllerName>", <functiion>) API

• Có ng-controller hoạt động không? Chỉ cần thêm nó vào mẫu

  Tương tự, không sử dụng bộ điều khiển ng trực tiếp bên ngoài công việc chỉ thị?