角度传递变量

时间:2014-12-10 22:21:40

标签: javascript angularjs function http couchdb

我试图将变量传递给控制器​​中的不同函数。以下是我用来执行此操作的代码:

HTML:

<table class="flat-table">
            <tr>
                <th>User</th>
                <th>Comment</th>
                <th>Date</th>
                <th>Controls</th>
            </tr>
            <tr ng-repeat="doc in guest.docs">
                <td>{{doc.value.user}}</td>
                <td>{{doc.value.comment}}</td>
                <td>{{doc.value.date}}</td>
                <td>
                    <img class="controls" src="styles/delete.png" ng-click="guest.delete(doc.id)" title="Delete">
                    <img class="controls" src="styles/edit.png" ng-click="guest.visible = true; guest.editBox(doc.id)" title="Edit">
                </td>
            </tr>
        </table>
        <div id="signCon">
            <form name="addForm" ng-submit="guest.add()">
                <textarea type="text" ng-model="guest.signature.comment" id="comment" placeholder="Enter a comment?!" required></textarea>
                <br/>
                <input type="submit" value="Sign!">
            </form>
        </div>
    </div>
    <div id="editCon" ng-show="guest.visible === true">
        <h1>Edit</h1>
        <p>Here you can alter your comment.</p>
        <form name="editForm" ng-submit="guest.submitEdit(guest.editBox.signature)">
            <textarea type="text" ng-model="guest.submitEdit.comment" required></textarea>
            <br/>
            <input type="submit" value="Edit!">
        </form>
    </div>

ANGULAR:

this.editBox = function(id) {
            var that = this;
            this.id = id;
            this.signature = {};
            if(self.visible) {
                $http({
                    url: 'http://ip:5984/guestbook/' + this.id,
                    method: 'GET',
                    withCredentials: true,
                    headers: {
                        'Authorization': auth_hash(UserService.get().username, UserService.get().password)
                    }
                }).success(function(data, status, headers, config) {
                    that.signature = data;
                    console.log(that.signature);
                }).error(function(data, status, headers, config) {
                    console.log("error!")
                });
            };
        };
        this.submitEdit = function(signature){
            var self = this;
            this.comment = '';
            this.signature = signature;
            console.log(this.signature);
        };

这个想法是,当用户点击编辑图像时,会出现一个新窗口,他们可以输入新评论并重新提交。窗口显示正确,我能够正确拉动对象。在尝试调用submitEdit函数时,它似乎没有通过签名变量。我这样做了吗?

1 个答案:

答案 0 :(得分:2)

如果我没弄错的话,你不会创建一个持久存储属性的新的editBox实例,所以guest.editBox.signature仅在editBox函数运行时存在,它不会持久存在。

您可以做的是在editBox之外的范围内创建一个新变量,类似于

this.signature = {};

然后在editBox中,您可以将签名对象分配给新创建的this.signature。

在您的editForm中,您可以使用

调用ng-submit
ng-submit="guest.submitEdit(guest.signature)"

如果需要,在submitEdit的末尾,您可以将this.signature重置为空对象。

p.s是否有理由不使用$ scope?