在angular.js中页面加载后的Angular 2路绑定

时间:2015-01-19 07:25:01

标签: angularjs

1)我有索引页面列表&编辑链接。编辑表单在同一个html中,但最初编辑' div' div是隐藏的。
2)我的控制器加载商品清单&显示记录和编辑链接。单击编辑链接转到控制器代码,获取单个记录并返回一个对象 3)我用新返回的对象更新我的$ scope.offer。然后我会显示编辑' div' div (作为模态)。我期望的是我的编辑表单显示默认值。但看起来好像没有绑定,我在编辑页面上没有任何价值。

我最近两天都在挣扎。我试过$ apply / $ digest,但是我收到了错误。我的理解是角度是2路绑定。但是在加载页面后,我无法在模态窗口中绑定变量。

非常感谢任何帮助。

提前致谢
至于
Manisha

angular.module('offers.controller',[])
.controller('OfferController', ['$scope', 'popupService', '$window', 'Offer', '$location',
    function($scope, popupService,$window,Offer,$location) {

$scope.offers = [];
$scope.offers = Offer.query(function(){
    console.log("scope.offers " + JSON.stringify($scope.offers));

});

$scope.deleteOffer = function (offer) {
    if (popupService.showPopup('Really delete this?'+offer._id)) {
        Offer.$delete({action:"delete",id:offer._id},function () {
            //$window.location.href = '';
            window.location.reload();
            //$location.path('/')
        });
    }
}

$scope.editOffer = function (offerPassed) {
    $scope.offer = Offer.get({action:"get",id:offerPassed._id},function (data) {
        $scope.offer = data;
        //all my below console.log values are coming properly 
        console.log("scope.offer._id " + $scope.offer._id);
        console.log("scope.offer.teamname " + $scope.offer.teamname);
        console.log("scope.offer.type " + $scope.offer.type);
        console.log("scope.offer.item " + $scope.offer.item);
        console.log("scope.offer.qty " + $scope.offer.qty);
        console.log("scope.offer.unit " + $scope.offer.unit);
        $('#show_offer_form_edit').toggleEditOfferForm();
    });
};
}]);

我的index.html

 ....  
         <div class="offer_one" ng-repeat="offer in offers | filter:offerSearchText"> {{offer.teamname}} wants to {{offer.type}} {{offer.qty}} {{offer.unit}} {{offer.item}} at Rs. {{offer.price}}
                    <div class="clearfix"></div>
                    <div class="pas align_r"><a href id="show_offer_form_edit" ng-click="editOffer(offer)" class="accept_lnk">Edit Offer</a> | <a href class="decline_lnk" ng-click="deleteOffer(offer)">Delete Offer</a></div>
                </div>
 ....
 <div class="pop_form" id="offer_frm_edit" ng-controller="OfferController">
   ID {{offer._id}} {{offer.qty}} {{offer.item}} {{offer.type}}
    <div class="header_offer">
        <div class="header_cent_txt left">Edit Offer</div>
    </div>
    <div class="clearfix"></div>
        <form id="offerEditform" name="offerform">
            <table width="100%" border="0" cellspacing="4" cellpadding="5">
                <tbody>
                <tr>
                    <td colspan="2"> <input type="text" ng-model="offer.teamname" disabled/></td>
                </tr>
                <tr>
                    <td width="19%" align="right">Type Of Offer</td>
                    <td width="81%">
                        <select name="select" required  ng-model="offer.type">
                            <option selected>Select One</option>
                            <option>Buy</option>
                            <option>Sell</option>
                            <option>Borrow</option>
                            <option>Exchange</option>
                        </select>
                        <span class="err_msg">Please Select</span></td>
                </tr>
                <tr>
                    <td align="right">Asset</td>
                    <td>
                        <select name="select" required  ng-model="offer.item">
                            <option selected>Select One</option>
                            <option>Cow</option>
                            <option>Bullock</option>
                            <option>Milk</option>
                        </select>
                        <span class="err_msg">Please Select one option from dropdown.</span></td>
                </tr>

                <tr>
                    <td colspan="2" align="right">
                        <a href="#" class="btn_inactive" id="cancel_edit_offer_frm">Cancel</a>&nbsp;
                        <a class="offer_btn" ng-click="updateOffer(offer)">Submit</a>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">&nbsp;</td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

解决了我自己的问题。这是一个非常小的错误,但从未实现过。我需要初始化我的'优惠'。

我修改的编辑功能如下:

$scope.Offer=new Offer();
....

$scope.editOffer = function (offerPassed) {
    $scope.Offer.$get({action:"get",id:offerPassed._id},function (Offer) {
        $('#show_offer_form_edit').toggleEditOfferForm();
    });
};