angularjs

Question

如何在 directive 中更新 collection 而 template 中更新 ng-model？

这是我的场景：plunkr

我的模板：

var GridTemplate = [
            '<div>',
                '<div>',
                    '<ul class="titles"><li  ng-repeat="page in currentPage">{{page.title}}</li></ul>',
                    '<div class="rowContent">',
                    '<ul ng-repeat="(title,page) in currentPage">',
                        '<li  ng-repeat="element in page.key track by $index">',
                        '<input type="text" name="" id="" ng-model="element" ng-blur="numSort( page, element )" /></li></ul></div>',
                    '<div class="pageNavigator"><ul><li  ng-repeat="page in slides"><a ng-href="">{{$index+1}}</a></li></ul></div>',
                '</div>',
            '</div>'
            ];

我的指令：

return {
        scope: {
            "pages" : "=",
            "viewports":"=",
            "numsorter":"&arrangeBy",
            "model" :"=ngModel"
        },

        template :GridTemplate.join(''),
        link: function(  scope, element, attrs  ) {

            scope.slides = [], scope.currentPageNo = 0;

            scope.numSort = function(  titleToSort, element ) {
                var requiredTitle = titleToSort ? titleToSort.title : scope.slides[0][0].title;
                scope.slides[scope.currentPageNo].forEach( function( item, index ){
                    if( item.title == requiredTitle ){
                        console.log( scope.model ); //not getting updated model
                        item.key= $filter('orderBy')( item.key, '', false ); //once the model updated requried to sort it again
                        $timeout(function(){
                            scope.$apply();
                        })
                    }
                })
            }



        }
    }

Answer 1

由于 ng-repeat 创建了新的子作用域，因此当您通过 ng-model=value 更改项目时，将创建新的属性内部作用域。而不是您的实际数组已更改。

因此，将绑定更改为 ng-model=slice[$index] 以实际更新数组。

看到这个工作 plunker，我将输入类型更改为 number，以将数据反映为数字。否则它将更新为字符串。

另一种更好的方法是 always have . in your model ，这意味着您可以创建分层范围对象。喜欢 slice=[{item:95},...{}..]、

然后是ng-repeat='sl in slice track by $index'>" 绑定就像 ng-model="sl.item"

angularjs - 从 `ng-model` 更新 `directive` 集合

angularjs - updating the `directive` collection from `ng-model`

angular-directive