गतिशील नियंत्रक और टेम्पलेट के साथ AngularJs निर्देश

Question

मैं एक निर्देश बनाना चाहता हूं जिसमें गतिशील नियंत्रक के साथ गतिशील दृश्य हो। नियंत्रक और टेम्पलेट दृश्य सर्वर से आ रहा है।

निर्देशक

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 जनवरी मैं सिर्फ मामले में मेरी कोड अद्यतन कुछ भी इसे करने में रुचि रखते हैं। सभी क्रेडिट @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> 

Answer 1

अद्यतन:

मुझे यह काम मिल गया, लेकिन यह वास्तव में बदसूरत है। जाँच करें:

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

आपका उदाहरण चलती टुकड़े का एक बहुत है, तो यह एक सरल है, लेकिन आप क्या चाहते हैं नहीं करता है।

असल में आपको एक रैपर निर्देश की आवश्यकता है जो जेएस ऑब्जेक्ट लेता है और स्ट्रिंग प्रॉपर्टी में परिवर्तित हो जाता है, तो आप अन्य सभी चीज़ों (टेम्पलेट, स्कोप इत्यादि) के लिए अपना निर्देश इस्तेमाल कर सकते हैं।

।

अद्यतन 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>

।

मूल (अब अप्रासंगिक लेकिन संबंधित अन्य मुद्दों पर मदद कर सकते हैं)

हाँ, यह काम करना चाहिए।

कोणीय 1.3 के साथ एक परीक्षण:

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

हालात की जाँच करने के:

• नियंत्रक परिभाषित और मॉड्यूल को जोड़ा गया है? यह

  काम नहीं करेगा यदि नियंत्रक सिर्फ वैश्विक कार्य है तो यह काम नहीं करेगा। इसे <myModule>.controller("<controllerName>", <functiion>) एपीआई

• ng-controller काम के माध्यम से जोड़ा जाना है? बस इसे टेम्पलेट

  पर जोड़ना, इसी प्रकार, सीधे निर्देश के बाहर एनजी-नियंत्रक का उपयोग कर रहा है?