AngularJS-将ng-controller名称转换为指令变量 [英] AngularJS - Turn ng-controller name into a directive variable

问题描述

如果我在指令模板中有一个div，并将其属性值赋予ng-controller，则如何将其更改为变量:

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

感谢Mark解决了此问题:

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

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

这是小矮人:

http://plnkr.co/edit/b6G2y3yqjhxpu059ZrWB

这是问题所在:

我将两个指令合并为一个超级指令.如果您转到app.js，使用指令'selectAddNew'，从底部的三行看，将看到:

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 \')" ..................

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

推荐答案

模板在编译阶段进行编译，此时someVarName不可用(这是指令范围的属性，未设置)然而).相反，在编译功能中，我们可以向div添加ng-controller属性，并将其设置为some-var-name属性的值:

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

小提琴

这篇关于AngularJS-将ng-controller名称转换为指令变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！