2

他の誰かが書いた 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>

助けてください、ありがとう!

4

1 に答える 1