他の誰かが書いた angular ディレクティブを編集しようとしていますが、問題が発生しています。これは属性ディレクティブであり、変更の属性の値として渡される値を監視したいと考えています。
これは、isolate スコープを指定し、scope.$watch を使用してプロパティを監視すると機能します。ただし、isolate スコープを使用すると、もともとスコープが true に設定されていたため、ディレクティブが壊れます (これは、親スコープを継承することを意味していると理解しています)。
だから私の質問は、どうすれば親スコープを継承できますが、属性の値も監視できますか?
わかりやすくするために、ディレクティブの基本的な例を次に示します。
return {
scope: {
myGridsterItem: "=gridsterItem"
},
restrict: 'EA',
controller: 'GridsterItemCtrl',
controllerAs: 'gridsterItem',
require: ['^gridster', 'gridsterItem'],
link: function(scope, $el, attrs, controllers) {
.....
// need to dynamically update draggable/resizable of individuaol gridster item if properties change
scope.$watch("myGridsterItem.draggable", function(newVal) {
draggable.updateDraggable(newVal);
}, true);
scope.$watch("myGridsterItem.resizable", function(newVal) {
resizable.updateResizable(newVal);
}, true);
.....
}
}
親スコープを継承していないため、これはエラーをスローします。そして、私が設定した場合
scope: true
エラーは解決しましたが、ウォッチ ハンドラが実行されません。
HTML の大まかな概要:
<div gridster="gridsterOpts">
<ul>
<li gridster-item="getPrefs(portlet.id)", ng-repeat="portlet in getPortlets()">
.....
</li>
</ul>
</div>
助けてください、ありがとう!