2016-07-29 10 views
0

スコープパラメータとng-controlerの両方を持つディレクティブを作成したいとします。スコープとng-controllerを持つカスタムanglejsディレクティブ

これは、このディレクティブはどのように見えるべきかです:

<csm-dir name="scopeParam" ng-controller="RegisteredController"> 
    <!--Here I want to have content--> 
    {{name}} 
</csm-dir> 

私は「RegistertedControllerは」私のアプリのどこかに宣言しました。

angular.module('app') 
    .controller('RegisteredController', ['$scope', function ($scope) { 
     //$scope.name should be accessible here 
    }]); 

そして、私はディレクティブを宣言しようとしています:

angular.module('app') 
    .directive('csmDir', [function() { 
     return { 
      restrict: 'AE', 
      replace: true, 
      transclude: true, 
      scope: { 
       name: '=' 
      }, 
      template: '<section class="layout"><ng-transclude></ng-transclude></section>', 
      link: function (scope, element, attr, ctrl, transclude) { 
       element.find('ng-transclude').replaceWith(transclude()); 
       //here I also need scope.name parameter 
      } 
     }; 
    }); 

私はエラーを取得する:

Multiple directives [ngController, csmDir] asking for new/isolated scope on: <csm-dir name="scopeParam" ng-controller="RegisteredController"> 

は今、このエラーは非常に有益である、と私はそれが角度として動作しません取得私はここで欲しい。

ディレクティブから "scope:{..}"パラメータを削除し、コントローラで定義することができますが、必要なものではありません。

私が必要とするのは、基本的にng-controllerをカスタムディレクティブに提供し、そのコントローラに追加のスコープ変数を提供することです。

どうすればこの問題を解決できますか?

+0

では、AngularJSコンポーネントでは十分ではありませんか? – doge1ord

答えて

0

タグを使用してディレクティブをラップし、そこにコントローラを配置する必要があります。

<div ng-controller="RegisteredController"> 
    <csm-dir name="scopeParam"> 
     <!--Here I want to have content--> 
     {{name}} 
    </csm-dir> 
</div> 

1つのタグで2つの分離スコープを取得する方法はありません。

+0

そうだけど、別の指令の中でng-controller指令をラップできるかどうか疑問に思っていた。 –

+0

面白いことをすることができる。親ディレクティブを作成し、コントローラーとリンクします。 次に、requireオプション付きのchildディレクティブを追加します。そしてコントローラにアクセスします。大丈夫ですか? – Vitalii

関連する問題