1

と という名前の 2 つのクラス制限ディレクティブがfooThingありbarThingます。

bazテンプレート スコープに、 または のいずれかに設定されfooた変数 がありますbar。

要素のディレクティブの名前でそのスコープ変数を使用するにはどうすればよいですか?

すると<div class="{{baz}}-thing"></div>、{{baz}}が適切に置き換えられますが、ディレクティブが読み込まれません。

すると<div class="foo-thing"></div>、ディレクティブが正しく読み込まれます。

これは Angular のダイジェスト/コンパイル サイクルと関係があるのではないかと思いますが、回避方法がわかりません。

テンプレートのその部分を最初に Angular にコンパイルさせて式を評価させ、次に再びコンパイルさせてそれをディレクティブとして認識させるにはどうすればよいでしょうか?

4

2 に答える 2

1

Making a directive that creates directives (a kind of directive factory), as suggested by Anders, is what I'm after. Guillaume86 provided a good method for doing that.

于 2013-02-17T23:07:02.880 に答える
0

それを機能させるには、テンプレートを最初にコンパイルしてスコープで実行し ({{baz}} を置き換えるため)、次にコンパイルして再度実行し、"foo-thing" ディレクティブを実行する必要があります。可能ですが、おそらく他の問題を引き起こす可能性があります。

あなたができることは、別のディレクティブを作成するディレクティブであるディレクティブ ファクトリのようなものを作成することです。次に例を示します。

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    var myApp = angular.module("myApp", []);
    myApp.directive('factory', function($compile) {
        return {
            restrict: 'A',
            scope: {
                type: '=factory'
            },
            replace: true,
            link: function($scope, elem, attrs) {
                var compiled = $compile('<'+ $scope.type +'></'+ $scope.type +'>')($scope);
                elem.append(compiled);
            }
        };
    });
    myApp.directive('concrete', function() {
        return {
            restrict: 'E',
            template: "<div>I'm concrete!</div>",
            link: function($scope, elem, attrs) {

            }
        };
    });

    function MyCtrl($scope, $timeout) {
        $scope.directiveType = "concrete";
    }
    </script>
</head>
<body>
    <div ng-controller="MyCtrl">
        <div factory="directiveType"></div>
    </div>
</body>
</html>
于 2013-02-14T07:37:41.293 に答える