3

ng-controller への属性値を持つディレクティブ テンプレート内に div がある場合、それを変数に変更するにはどうすればよいですか。

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

これを解決してくれてありがとうマーク：

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

}))

- - - - - - - - - - - - - - - - - - - - - - -マーク - - --------------------------------------------------

プランカーは次のとおりです。

http://plnkr.co/edit/b6G2y3yqjhxpu059ZrWB

問題は次のとおりです。

2 つのディレクティブを 1 つのスーパー ディレクティブに結合しました。app.js のディレクティブ 'selectAddNew' に移動すると、下から 3 行目に次のように表示されます。

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

しかし、それはハードコードされています。スーパーディレクティブのアクションにするためにあらゆる方法を試しましたが、最も近いのは、フォーム全体のウィンドウを開く共通ダイアログでした。何か案は？

4

2 に答える 2

2

テンプレートはコンパイル段階でコンパイルされ、その時点someVarNameでは使用できません (まだ設定されていないディレクティブのスコープのプロパティです)。代わりに、コンパイル関数で、ng-controller属性を に追加しdiv、それを属性の値に設定できsome-var-nameます。

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

フィドル

于 2013-04-27T15:27:50.833 に答える