2

次のようなディレクティブがあります。

app.directive('fieldsetCollapse', function() {
return {
    restrict: 'A',
    scope: {},
    compile: function(tElement, tAttrs, transclude) {
        var wrapperElement = angular.element('<div ng-show="isOpen"></div>'),
            legendElement = tElement.find('legend'),
            collapsibleContent = tElement.children().not('legend'),
            toggleBtn = angular.element('<a href="#" class="twisty" ng-class="{ true: \'twisty-open\', false: \'twisty-closed\' }[isOpen]" ng-click="toggle()"></a>');

        legendElement.css('cursor', 'pointer')
                      .attr('ng-click', 'toggle()');

        tElement.css({
            'position': 'relative',
            'marginLeft': '20px'
        });
        tElement.prepend(toggleBtn);

        angular.forEach(collapsibleContent, function(obj, i) {
            $(obj).remove();
            wrapperElement.append(obj);
        });

        tElement.append(wrapperElement);

        return function(scope, element, attrs) {
            var directiveValue = (scope.$eval(attrs.gaigCollapsibleFieldset));
            scope.isOpen = (directiveValue == undefined) ? true : directiveValue;

            scope.toggle = function() {
                scope.isOpen = !scope.isOpen;
            }

        }
    }
}

}）;

このマークアップで機能するもの：

<fieldset fieldset-collapse> ... </fieldset>

<fieldset>内に次のようなものを追加しようとすると：

<fieldset fieldset-collapse>{{foo}}</fieldset>

...コントローラーのスコープでfooが定義されている場合、出力は次のようになります。

{{foo}}

Angularは、ディレクティブを使用してタグの間に追加したものをコンパイルしていません。ディレクティブ内でこれを実現するための何かが欠けていますか？

4

1 に答える 1

2

ディレクティブ定義オブジェクトに分離スコープを作成しています

return {
    restrict: 'A',
    scope: {} // <--- isolated scope
}

これは、ディレクティブがの値が存在する親スコープにアクセスできないことを意味しますfoo。

コメントしてください。例http://jsfiddle.net/jaimem/RE7Jj/1/

ディレクティブが親スコープに完全にアクセスできないようにする場合は、ローカルスコーププロパティfooと親のプロパティの間に双方向バインディングを設定できますfoo。ドキュメントの詳細：http：//docs.angularjs.org/guide/directive

于 2012-10-26T16:00:05.103 に答える