Question

我编写了这个指令editable-field，以便能够在表单搜索结果之后编辑值。

<table>..
<tr ng-repeat="emp in srchCtrl.emps | orderBy : 'salary'">
        <td>{{emp.id}}</td>
        <td editable-field="emp.name"></td>
        <td editable-field="emp.salary"></td>
        <td editable-field="emp.department.name"></td>
    </tr>
</table>

更改值后，值会更改，但是，如何使用orderBy过滤器使用新值来请求angular刷新结果？

.controller('MainController')..
var self = this;
self.emps = [ ]; // this will be populated after the promise resolves.

}

我看到emps通过打印来更新。

.directive('editableField', function () {
    var self = this || {};
    self.link = function (scope, elm, attr, editCtrl) {
        var previousValue;
    editCtrl.edit = function () {
        editCtrl.editMode = true;
        previousValue = editCtrl.model;
        elm.find('input')[0].focus();
    };
    editCtrl.save = function () {
        editCtrl.editMode = false;
    };
    editCtrl.cancel = function () {
        editCtrl.editMode = false;
        editCtrl.model = previousValue;
    };
}
return {
    scope: {},
    controllerAs: 'editCtrl',
    controller: function () {
    },
    bindToController: {
        model: '=editableField'
    },
    link: self.link,
    templateUrl: '../../../templates/row-edit.html'
};
})

这是我的editableField指令，它将行上的editableField字段绑定到控制器中的模型，即editCtrl。

在保存时，我在主控制器上调用回调函数，该函数引用了emps

如果我在任何editCtrl的保存中调用scope。$ apply（），它会显示“$ apply has in progress”

$scope.$watch(angular.bind(self, function () {
                        return self.emps; // `this` IS the `this` above!!
                    }), function (newVal, oldVal) {
                        // now we will pickup changes to newVal and oldVal
                        if (newVal === oldVal) { console.log('first time'); return; } // AKA first run
                        console.log('self.emps updated');
                    });

我看到在UI中更改值的更新值。

 scope.$watch(angular.bind(editCtrl, function () {
                                return editCtrl.model;
                            }), function (newVal, oldVal) {
                                if (newVal === oldVal) { console.log('model first time'+newVal); return; }
                                console.log('model updated');
                            });

Answer 1

您的 可编辑字段 指令应具有以下内容：

scope: {
    "emp": "="
}

将传递的值更改为可编辑字段会反映回父 控制器/指令 。

在以角度编辑结果值后，orderBy似乎不起作用

1 个答案: