Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Robert Lee 2 posts 22 karma points
    Aug 24, 2015 @ 02:29
    Robert Lee
    0

    Angular Model Binding Issue

    I'm using Tim's People Tree example (http://www.nibble.be/?p=440) to get up to speed on building Sections, but I've run into an issue with part of the binding.

    If I change a value in the View and save, it updates to the DB and reloads to the tree correctly. Stepping through the JS in Firefox shows that the object is being loaded in the controller, but the Input Editors in the View never update with the existing value (they stay blank).

    The View:

    <form name="dsMenuItemForm"
      ng-controller="DSMenuItems.MenuItemEditController"
      ng-show="loaded"
      ng-submit="save(dsMenuItem)"
      val-form-manager>
    <umb-panel>
        <umb-header>
            <div class="span7">
                <umb-content-name placeholder="@placeholders_description"
                                  ng-model="dsMenuItem.description" />
            </div>
            <div class="span5">
                <div class="btn-toolbar pull-right umb-btn-toolbar">
                    <umb-options-menu ng-show="currentNode"
                                      current-node="currentNode"
                                      current-section="{{currentSection}}">
                    </umb-options-menu>
                </div>
            </div>
        </umb-header>
        <div class="umb-panel-body umb-scrollable row-fluid">
            <div class="tab-content form-horizontal" style="padding-bottom: 90px">
                <div class="umb-pane">
    
                    <umb-control-group label="Description" description="item description'">
                        <input type="text" class="umb-editor umb-textstring" ng-model="dsMenuItem.description" required />
                    </umb-control-group>
    
                    <div class="umb-tab-buttons" detect-fold>
                        <div class="btn-group">
                            <button type="submit" data-hotkey="ctrl+s" class="btn btn-success">
                                <localize key="buttons_save">Save</localize>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </umb-panel>
    

    And the Controller

    angular.module("umbraco").controller("DSMenuItems.MenuItemEditController",
    function ($scope, $routeParams, dsMenuItemResource, notificationsService, navigationService) {
    
        $scope.loaded = false;
    
        if ($routeParams.id == -1) {
            $scope.dsMenuItem = {};
            $scope.loaded = true;
        }
        else {
            //get a menuitem id -> service
            dsMenuItemResource.getById($routeParams.id).then(function (response) {
                $scope.dsMenuItem = response.data;
                $scope.loaded = true;
            });
        }
    
    
        $scope.save = function (dsMenuItem) {
            dsMenuItemResource.save(dsMenuItem).then(function (response) {
                $scope.dsMenuItem = response.data;
                $scope.dsMenuItemForm.$dirty = false;
                navigationService.syncTree({ tree: 'DSMenuItemsTree', path: [-1, -1], forceReload: true });
                notificationsService.success("Success", dsMenuItem.id + " " + dsMenuItem.description + " has been saved");
            });
        };
    
    
    });
    

    I'm sure this is something simple that I'm just not seeing.

  • Warren Buckley 2106 posts 4836 karma points MVP ∞ admin hq c-trib
    Aug 25, 2015 @ 13:41
    Warren Buckley
    0

    Hi Robert,

    I am not 100% sure but it may be to do with the code where you are checking if the routeParams.id is -1 if ($routeParams.id == -1)

    By doing so you set the dsMenuItem object that you seem to be binding a lot of your view off is an empty object, as when you save in the function you call syncTree with a path of -1, -1 which I can assume would set the $routeParams.id to be -1

    For debugging I would check & verify what $routeParams.id value is.

    So perhaps add above the line $scope.loaded = false;

    console.log('Route Params ID', $routeParams.id);
    

    Hopefully this helps shed some light on the problem.

    Cheers,
    Warren

  • Robert Lee 2 posts 22 karma points
    Aug 27, 2015 @ 11:07
    Robert Lee
    0

    Thanks so much for taking time to look at this Warren.

    I had to work on another project for a few days, and when I opened this one today everything just works.

    So I'm going to chalk this up to caching, even though I had the developer tab in Firefox open, had it set to not cache, touched the web config, etc.

Please Sign in or register to post replies

Write your reply to:

Draft