Question

我有一些ng-repeat

['fadeinright', 'fadeinleft', 'fadeintop', 'fadeinbottom', 'fadeinbig', 'fadeinsmall'].forEach(function (name) {
    $('#' + name).waypoint(function (direction) {
        if (direction === 'down') {
            $(this).removeClass(name);
        }
    }, {
        offset: '100%'
    });
});

这是我的控制器代码：

<tr ng-repeat="Picture in Pictures">
    <td>{{Picture.Id}}</td>
    <td>
        <div ng-hide="Picture.editorEnabled">
            {{Picture.Name}}
        </div>
        <div ng-show="Picture.editorEnabled">
            <input ng-model="Picture.editName" class="form-control" ng-show="Picture.editorEnabled">
        </div>
    </td>
    <td>
        <button type="button" name="editButton" class="btn btn-warning" ng-hide="Picture.editorEnabled"
                ng-click="enableEditor(Picture)">Edit
        </button>
        <div ng-show="Picture.editorEnabled">
            <button type="button" name="saveEditButton" class="btn btn-success"
                    ng-click="saveEditor(editName,editImageUrl,Picture)">Save
            </button>
            <button type="button" name="cancelEditButton" class="btn btn-warning" ng-click="disableEditor(Picture)">
                Cancel
            </button>
        </div>
    </td>
</tr>

当我点击“编辑”时出现编辑字段和保存，取消按钮。当我点击“取消”时，它会消失。当我单击“保存”字段保存到DB时，方法$scope.enableEditor = function(picture) { picture.editorEnabled = true; picture.editName = picture.Name; picture.editImageUrl = picture.ImageUrl; }; $scope.disableEditor = function(picture) { picture.editorEnabled = false; picture.editName = null; picture.editImageUrl = null; }; $scope.saveEditor = function(name, url, picture) { $.ajax({ url: 'admin/pictures/edit/' + picture.Id, type: 'POST', data: { ImageUrl: url, Name: name }, success: function() { picture.Name = picture.editName; picture.ImageUrl = picture.editImageUrl; $scope.disableEditor(picture); } }); };在同一个对象上执行，我检查disableEditor属性，在调试器中显示Id为假，但在我的浏览器中仍然存在保存，取消按钮和字段以进行编辑。我再次点击“保存”，它就消失了。

Answer 1

您应该尝试使用$http代替$.ajax。 jQuery的$.ajax在Angular的范围之外执行。回调中的任何代码都不会反映在您的范围内，因为这发生在Angular的摘要周期之外。请尝试以下方法：

var url = 'admin/pictures/edit/' + picture.Id;

var data = $httpParamSerializerJQLike({
    ImageUrl: url,
    Name: name
});

var config = {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
};

$http.post(url, data, config).then(function() {
    picture.Name     = picture.editName;
    picture.ImageUrl = picture.editImageUrl;
    $scope.disableEditor(picture);
});

为此，您需要将$http和$httpParamSerializerJQLike服务注入控制器。我假设您需要将其作为表单提交，因为默认情况下$.ajax的工作方式。这需要Angular 1.4 +。

注意，虽然可以使用$.ajax然后将您的成功代码包装在$timeout或$scope.$apply()中，但最好使用Angular自己的$http。

Answer 2

这不起作用，因为你在$scope.saveEditor中所做的一切都发生在angular之外（我假设$是jQuery）。这根本不是棱角分明的方式。

您应该深入了解https://docs.angularjs.org/api/ng/service/$http角度HTTP服务，然后使用它。

Answer 3

每次使用非“角度方式”的东西时，你都需要使用$ apply，就像Anid已经提到的那样。

例如，如果您使用jQuery的http而不是angular的$ http，则必须添加$ scope。$ apply。

angularjs ng-show绑定不适用于jQuery

3 个答案: