strange things in my custom section

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

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

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

Copy Link
Michaël Vanbrabandt 863 posts 3348 karma points c-trib

Oct 03, 2016 @ 13:07

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

Copy Link
Burichan 17 posts 129 karma points

Oct 03, 2016 @ 13:20

0

Here you are!

Thanks Michaël :)

Copy Link
Michaël Vanbrabandt 863 posts 3348 karma points c-trib

Oct 03, 2016 @ 13:51

0

Can you post the controller js file code?

/Michaël

Copy Link

Burichan 17 posts 129 karma points

Oct 03, 2016 @ 14:02

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;
}

Copy Link

Burichan 17 posts 129 karma points

Oct 04, 2016 @ 07:25

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

Copy Link

Micha Somers 134 posts 597 karma points

Oct 04, 2016 @ 16:53
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?
Copy Link
Burichan 17 posts 129 karma points

Oct 05, 2016 @ 07:07

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.

Copy Link
Micha Somers 134 posts 597 karma points

Oct 05, 2016 @ 07:46
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.
Copy Link
Burichan 17 posts 129 karma points

Oct 06, 2016 @ 10:21

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 :(

Copy Link
Micha Somers 134 posts 597 karma points

Oct 06, 2016 @ 11:28
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 ...
Copy Link
Burichan 17 posts 129 karma points

Oct 11, 2016 @ 07:05

1

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

I'm a newbie in AngularJS! ^_^

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?