AngularJS - Turn ng-controller name into a directive variable

Question

If I have a div inside a directive template with an attribute value to a ng-controller, how can I change that into a variable:

original html : <div ng-controller="HomeController"> ..... </div>

directive: <my-directive some-var-name="HomeController"> ....</my-directive>

---

.directive('MyDirective', function(){
  return {
   .....
   scope:
   {
     someVarName : "????"  <-- what type? "=", "@", "&" : none seem to work
   },
   template: '<div ng-controller="someVarName">.....</div>'      
   }
   });

Thanks Mark for solving this:

    <select-add-new  select-model="$parent.selectedFrontAxle" text="add new" 
             select-phrase="Front Axle Type" preselected-filter="Front" 
             label-name="Front Axle" open-dialog="Front" 
             select-options="axleTypes" var-ctrl="AxleTypesCtrl"></select-add-new>

  .directive('selectAddNew', function () {
   return {
    replace: true,
    restrict: "E",        
    scope: {
        selectModel: "=",
        selectOptions:"=",
        labelName: "@",
        preselectedFilter: "@",
        selectPhrase: "@",
        text: "@"
    },
    compile: function(tElement, attrs) {
        var div = tElement.find('#ctrlId');
        div.attr('ng-controller', attrs.varCtrl);
    },
    template: '<div>' + 
              '<div class="local-label">{{labelName}}: </div>' +
              '<name-value-select-control  select-phrase="{{selectPhrase}}" selected-item="selectModel" preselected-filter="{{preselectedFilter}}" options="selectOptions"></name-value-select-control>' +
              '<div id="ctrlId">' +
              '<div txt-add-new text="{{text}}" action="openDialog(\'Front\')" style="display: inline-block"></div>' +
              '</div>' +
              '</div>'
};

})

---------------------------------------------Mark------------------------------------------------------

Here's the plunker:

http://plnkr.co/edit/b6G2y3yqjhxpu059ZrWB

Here is the problem:

I combined two directives into one super directive. If you go to app.js, directive 'selectAddNew', thrid line from the bottom you will see:

......... action="openDialog(\'Front\')" ..................

But that is hard coded. I tried every which way to make it an action in the super directive but the closest I came was the common dialog opening a window of the entire form. Any ideas?

Answer 1

The template is compiled during the compile phase, at which point someVarName is not available (it is a property of the directive's scope, which is not set up yet). Instead, in the compile function, we can add an ng-controller attribute to the div, and set it to the value of the some-var-name attribute:

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        template: '<div>....</div>',
        compile: function(tElement, attrs) {
            var div = tElement.find('div');
            div.attr('ng-controller',attrs.someVarName);
        }
    }
});

Fiddle