Copied to clipboard

Flag this post as spam?

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


  • Burichan 17 posts 129 karma points
    Oct 03, 2016 @ 12:43
    Burichan
    1

    Strange things in my custom section

    Hello,

    I'm currently developing a custom section in the back office of a specific website. Everything is alright, except that weird thing that keeps happening since the very first build & run.

    Normally when you click on a node, the content renders on the right side with the help of ".html" files while Angular does it's own magic.

    Now the problem is that every content which renders dynamically (i.e checkbox values and text-content parsed from json) becomes visible right after I move my mouse cursor over the HTML panel. This happens to all of my nodes.

    Also I couldn't find anything on Google, and neither of my co-partners have experienced something like this in the past.

    Peace

  • Michaël Vanbrabandt 863 posts 3343 karma points c-trib
    Oct 03, 2016 @ 13:07
    Michaël Vanbrabandt
    0

    Hi Burichan,

    can you show an example of the issue or in a short movie? Because now its quite hard to see what the problem is.

    /Michaël

  • Burichan 17 posts 129 karma points
    Oct 03, 2016 @ 13:20
    Burichan
    0

    Here you are!

    Thanks Michaël :)

  • Michaël Vanbrabandt 863 posts 3343 karma points c-trib
    Oct 03, 2016 @ 13:51
    Michaël Vanbrabandt
    0

    Can you post the controller js file code?

    /Michaël

  • Burichan 17 posts 129 karma points
    Oct 03, 2016 @ 14:02
    Burichan
    0

    This is my ng-controller function that lives inside my script tags.

    function burichan($scope, $http, $routeParams, notificationsService, navigationService, dialogService, entityResource) {
        $scope.loaded = true;
        $scope.currentId = $routeParams.id;
    
        $.ajax({
            type: "GET",
            url: "/umbraco/api/CustomSectionApi/getDescription",
            data: { 
                id: $scope.currentId
            }
        }).success(function (data) {
            $scope.description = data;
        });
    
        $scope.loaded = true;
    }
    
  • Burichan 17 posts 129 karma points
    Oct 04, 2016 @ 07:25
    Burichan
    0

    This is my html:

    <umb-panel ng-controller="MyController" data-ng-init="init()">
    <umb-header>
        <div class="umb-headline-editor-wrapper span12 ng-scope">
            <h1><b>Offer</b></h1>
        </div>
    </umb-header>
    <umb-tab-view>
        <div class="umb-pane">
            <h5 ng-bind="currentId"></h5>
            <p ng-bind="description"></p>
        </div>
    </umb-tab-view>
    

    I also modified the controller to alert me about page loading in console:

    function MyController($scope, $http, $routeParams) {
        $scope.currentId = $routeParams.id;
        $scope.description = "Before mouse-over.";
        $scope.init = function () {
            $.ajax({
                type: "GET",
                url: "/umbraco/api/CustomSectionApi/getDescription",
                data: {
                    id: $scope.currentId
                }
            }).success(function (data) {
                $scope.description = data;
                angular.element(document).ready(function () {
                    console.log('page loading completed');
                });
            });
        }
    }
    

    The problem still persists. When I refresh page, my console says "page loading completed" and html "Before mouse-over.". When I move my cursor on the pane, "Before mouse-over" changes to the desired string.

    I mean this is crazy, right? I even tried to create a new project and revamp it.

    Still same results.

    c_c

  • Micha Somers 134 posts 596 karma points
    Oct 04, 2016 @ 16:53
    Micha Somers
    0

    In your ng-controller, you start with setting $scope.loaded to true:

    function burichan($scope, $http, $routeParams, notificationsService, navigationService, dialogService, entityResource) {
        $scope.loaded = true;
    ...
    

    What happens if you change this to false?

  • Burichan 17 posts 129 karma points
    Oct 05, 2016 @ 07:07
    Burichan
    0

    It happens nothing unfortunately... that was just some var of mine. I believe it's a bug. I guess we'll have to wait for Umbraco to update its Angular.

  • Micha Somers 134 posts 596 karma points
    Oct 05, 2016 @ 07:46
    Micha Somers
    0

    Another thing that looks suspicious is the usage of the

    <umb-panel ng-controller="MyController" data-ng-init="init()">
    

    It doesn't have a closing tag.

    Second, I am not sure if having the ng-controller="" ... code in ump-panel tag would work. Maybe you need a surrounding form or div tag for that.

  • Burichan 17 posts 129 karma points
    Oct 06, 2016 @ 10:21
    Burichan
    0

    It has a closing tag, I forgot to include it when I did copy/paste.

    Also enclosed my html within a div tag where I put my ng-controller. Still nothing :(

  • Micha Somers 134 posts 596 karma points
    Oct 06, 2016 @ 11:28
    Micha Somers
    100

    Ok,

    If you don't mind, there are still some other things to try ...

    Especially the structure for tabs looks different from what I would expect. Since you are using umb-tab-view, I assume that you do need tabs. But with what you provided so far, it looks like you are using a kind of tab control without tabs...

    As a general example, the following structure with tabs:

    <div ng-controller="xxxController">
        <umb-panel>
            <umb-header tabs="content.tabs">
                <div class="umb-headline-editor-wrapper span12 ng-scope">
                <h1><b>Offer</b></h1>
                </div>
            </umb-header>
            <umb-tab-view>
            <umb-tab id="tab1">
                <div class="umb-pane">
                </div>
            </umb-tab>
            <umb-tab id="tab2">
                    <div class="umb-pane">
                    </div>
                </umb-tab>
            </umb-tab-view>
        </umb-panel>
    </div>
    

    In your case, I do not see any tabs defined in the umb-header, like

    <umb-header tabs="content.tabs">
    

    Did you define tabs in your $scope? Something like:

    $scope.content = { tabs: [ 
    { id: 1, label: "xxx" }, 
    { id: 2, label: "yyy" }, 
    { id: 3, label: "zzz" }
    };
    

    Further, in your umb-tab-view, there are no umb-tab tags. I guess that you need these ...

  • Burichan 17 posts 129 karma points
    Oct 11, 2016 @ 07:05
    Burichan
    1

    Thanks Micha. That solved it... I was missing some of the tabs structure!

    I'm a newbie in AngularJS! ^_^

Please Sign in or register to post replies

Write your reply to:

Draft