1

スコープの分離がどのように機能するかを理解しようとしていますが、明らかに非常に基本的なものが欠けています。選択ボックスを介してスコープ プロパティを設定し、このプロパティをディレクティブの分離スコープに渡そうとしていますが、正しく機能していないようです。

私の問題を要約した例を 次に 示します。

<div ng-controller="MyCtrl">
   <select name='optionfoo' ng-model='foo'>
       <option>a</option>
       <option>b</option>
    </select>
    value: {{foo}}
    <div id='dir' isolate_foo="{{foo}}" dir></div>
    <div id='dir2' foo="{{foo}}" dir2></div>
</div>

js コード:

var myModule = angular.module('myModule', [])
    .directive('dir', function () {
        return {
            restrict:'A',
            template: 'isolate foo: {{foo}}',
            scope:{               
                foo:'@isolate_foo',
            }        
        };
    }).directive('dir2', function () {
        return {
            restrict:'A',
            template: 'parent foo:{{foo}}', 
        };
    })
    .controller('MyCtrl', ['$scope', function ($scope) {
        $scope.foo = 'b';
    }]);

この例では、2 つのディレクティブがあります。1 つは、isolate スコープを介してプロパティを取り込もうとするもので、もう 1 つは親スコープを継承するだけのものです。「dir2」ディレクティブは期待どおりに機能しているように見えますが、「dir」ディレクティブ (isolate スコープ ディレクティブ) は、親ディレクティブで渡されている属性を実際に設定解除しているようです。

これは初心者の質問だと確信していますが、検索に何時間も費やしましたが、何が間違っているのかわかりません。どんな提案でも大歓迎です。

ありがとう！

4

2 に答える 2

1

命名規則の問題です。交換

scope: {               
  foo:'@isolate_foo',
}

と

scope: {               
  foo:'@isolateFoo',
}

そしてそれはうまくいくでしょう。これが、その修正が適用されたjsFiddleです。

その説明はAngular docsにあります：

ディレクティブには、ngBind などのキャメル ケースの名前があります。このディレクティブは、キャメル ケース名を特殊文字 :、-、または _ を使用してスネーク ケースに変換することで呼び出すことができます。

したがって、マークアップを として定義するとisolate_foo、Angular は設計上、その値をisolateFooディレクティブのスコープで指定されたプロパティにマップします。

于 2013-10-05T03:54:36.367 に答える