0

AngularJS 0.10 のインライン編集ディレクティブを示す優れたフィドルを見つけました。残念ながら、このコードは 1.0 以降のリリースでは機能しません。最近のAngularリリースで同様の機能の例を持っている人はいますか?

model: 'accessor'に変更することである程度の進歩を遂げることができましたmodel: '&'が、Enter キーを押してもテキスト値は変更されません。ディレクティブ定義オブジェクトのパラメーターに関するAngularJS のドキュメントscopeは、私にはまったくわかりません。

4

2 に答える 2

4

単純な双方向バインディングが必要な場合は、 model: '='代わりにmodel: '&'

指令：

app.directive('inlineEdit', function() {
    return {
        restrict: 'E',           
        templateUrl: 'componentTpl.html',
        scope: {
            model: '=' 
        }
    };
});

テンプレート：

<script type="text/ng-template" id="componentTpl.html">  
    <span ng-hide="editMode" ng-click="editMode=true;value=model">{{model}}</span>
    <input type="text" ng-model="value" ng-show="editMode" ng-model-instant ng-enter="editMode=false" ng-change="model=value"/>
</script>

jsFiddler : http://jsfiddle.net/XuhzP/147/

于 2013-01-14T17:04:29.283 に答える
1

「=」バインディング (双方向) を使用してから、スコープの「モデル」プロパティに直接バインドする必要があります。

修正されたサンプルは次のとおりです: http://plnkr.co/edit/tjTsNiQ7t0xMWkCEAzwo?p=preview

（@bmleiteが与えたのと同じ解決策）

于 2013-01-14T17:09:44.303 に答える