たぶん私は頭がおかしいか、KnockoutJSに慣れすぎているのかもしれませんが、要素、コントローラー、または含まれる (ngInclude) パーシャルのスコープを定義するために、ドキュメントで ngWith ディレクティブを探し続けています。
例えば:
MyItem を次のように拡張するコントローラーを作成したいと思います。
MyModule.controller('MyItemCtrl', function($scope) {
$scope.doSomethingToItem = function() {
$scope.name = "bar";
};
});
または、次のような MyItem のビュー/テンプレート:
<div ng-controller="MyItemCtrl">
{{name}}
<button ng-click="doSomethingWithItem()">Do Something</button>
</div>
しかし、これらのケースの両方で、 $scope がプロトタイプとしてモデルから継承されると想像していますMyItem
。
しかし、スコープはモデルから継承されません!!
それは私を困惑させます。
代わりに、私のモデルはスコープのプロパティです。
リピーターの場合:
<div ng-repeat="item in list">
<div ng-controller="MyItemCtrl">
{{item.name}}
<button ng-click="doSomethingWithItem()">Do Something</button>
</div>
</div>
これは、 andの代わりにitem.this
orを使用する必要があるすべての場所を意味します。どの関数がモデルにネイティブで、どれがコントローラーによってスコープに直接適用されたかを覚えておく必要があります。item.that
this
that
部分的な表示名が必要な場合 (ばかげた例ですが、わかります) :
<h3>{{name}}</h3>
私はそれを書かなければなりません
<h3>{{item.name}}</h3>
モデルが常にitem であることを確認します。item
通常は、プロパティでスコープを定義するためにディレクティブでラップするだけです。
私がやりたいと感じることが多いのは、単純に次のことです。
<div ng-include="'my/partial.html'" ng-with="item"></div>
また
<div ng-repeat="list" ng-controller="MyItemCtrl">
{{name}}
<button ng-click="doSomethingWithItem()">Do Something</button>
</div>
私が見つけていない魔法の指示はありますか?それとも、私は完全に間違っていて、トラブルを探しているだけですか?
ありがとう。
編集:
スコープをモデルとして使用することの危険性を説明してくれた Brandon Tilley に感謝します。しかし、私はまだ、宣言的なスコープ操作を迅速に行う必要があることに気づき、ng-with ディレクティブを望んでいます。
たとえば、アイテムのリストがあり、クリックすると、選択したアイテムの展開ビューが表示されるとします。あなたはそれを次のように書くかもしれません:
<ul>
<li ng-repeat="item in items" ng-click="selection = item">{{item.minView}}</li>
</ul>
<div ng-controller="ItemController">
{{selection.maxView}}
</div>
selection.property
ここで、私が望むものではなく、選択した項目のプロパティを取得する必要があります: item.property
。私も使用する必要がありselection
ますItemController
! このビューと完全に結合するようにします。
この単純な例では、ラッピング コントローラーを使用して動作させることができますが、要点を示しています。
私は非常に基本的なwith
ディレクティブを書きました:
myApp.directive('with', ['$parse', '$log', function(parse, log) {
return {
scope: true,
link: function(scope, el, attr) {
var expression = attr.with;
var parts = expression.split(' as ');
if(parts.length != 2) {
log.error("`with` directive expects expression in the form `String as String`");
return;
}
scope.$watch(parts[0], function(value) {
scope[parts[1]] = value;
}, true);
}
}
}]);
ある式を別の値に解析する新しいスコープを作成するだけで、次のことが可能になります。
<ul>
<li ng-repeat="item in items" ng-click="selection = item">{{item.minView}}</li>
</ul>
<div with="selection as item" ng-controller="ItemController">
{{item.maxView}}
</div>
これは私にとって無限に役立つようです。
ここで何か不足していますか?どういうわけか自分自身を困らせているだけですか?