Hi Double,

maybe there is an error in your package.manifest file or your initialization of the angularJS controller is wrong? Can you post the first lines of your controller here, please?

Or is this the first line in your controller?
'use strict';

(function () {

    //create the controller
    function productTreeEditController($scope, $routeParams) { 

Best,

Sören

Hi Sören,

thanks a lot for the fast response. 

Yes. this is the full controller code. isn't right?

Hi Double,

I think the problem exist, because you using jquery instead of angularJS.

An angularJS controller must begin with this code:

angular.module("umbraco").controller("ProductSection.ProductTree.ProductTreeEditController", function ($scope, $routeParams) {

And have you create a package.manifest file? This is indispensable for a custom property editor.

Best,

Sören

yes the package manifest is ok. At least the js code is injected and if i set any console log or debugger i can see the code running. So maybe you are right about the problem is related to jquery! so let me rephrase my question.

How can i inject on each tab some html content as i'm doing with jquery but using angular. What i'm trying to do is just load the result of a mvc action that will return a partial view

this is my manifest 

{

javascript: [

    '~/App_Plugins/ProductSection/BackOffice/ProductTree/ProductSection.ProductTree.edit.Controller.js'

]

}

i'm editing my post since i found that the issue is not with jquery. If i remove the call to my partial view and let only hardcoded html on view the issue persist. 

This is my controller now.

'use strict';

(function () {

    //create the controller

    function productTreeEditController($scope, $routeParams) {

        //set a property on the scope equal to the current route id

        $scope.id = $routeParams.id;

        $scope.content = { tabs: [{ id: 1, label: "Lista de hoteles" }, { id: 2, label: "Subir Hoteles" }] };

    };

    //register the controller

    angular.module("umbraco").controller('ProductSection.ProductTree.ProductTreeEditController', productTreeEditController);

})();

My view : 

<divng-controller="ProductSection.ProductTree.ProductTreeEditController">

    <umb-panel>

        <umb-headertabs="content.tabs">

            <divclass="umb-headline-editor-wrapper span12 ng-scope">

                <h1 class="ng-binding">{{label}}</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>

And console errors:

Error: No controller: form

    at Error (native)

    at i (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:42:359)

    at k (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:44:463)

    at e (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:40:139)

    at http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:39:205

    at http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:162:213

    at Object.fn (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:90:12)

    at Object.$get.e.$digest (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:90:356)

    at Object.$get.e.$apply (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:92:431)

    at j (http://localhost:49314/umbraco/lib/angular/1.1.5/angular.min.js:101:80) <li ng-class="{active: $first, 'tab-error': tabHasError}" ng-repeat="tab in visibleTabs" val-tab="" class="ng-scope">

So same issue without using jquery....

But if i remove this code

 $scope.content = { tabs: [{ id: 1, label: "Lista de hoteles" }, { id: 2, label: "Subir Hoteles" }] };

I will no longer see the js issues.... but offcourse tabs are not rendered on view... Can anyone from the comunity help me with this?

thks a lot,

Marco

Hi Double,

Have you solve this problem? I got the same issue when I turn my page using umbraco tabs, but when I remove the tabs, no js error found in the console.

Thanks,
Delly 

Hi,

I have working tabs in the code demo of my Umbraco Uk festival talk : https://bitbucket.org/dawoe/umbukfestival2014

Maybe you can have a look there ?

Dave

Hi Dave,

Thanks for your code demo, now I know what the problem and why this error come from. It's because of my tab doesn't surrounded by form tag it cause the error for my code:

Here's the code that cause error:

and here's the solution:

Thanks Dave for your help.

/Delly 

Glad to be of help. Don't forget to mark this post as solution so others can find it.

Dave

Hello,

Sorry guys for the late feedback, i was not near my computer actually i was in vacations. Dely i'm happy that you did resolve your issue, but mine is a little bit different. I want to use a tab but i don't need a form. In fact what i would like to have is a listview to show several items from a custom table. Anyone knows how to do this?

I saw some other posts on the forum looking for a solution like this.

Best,

Marco Teodoro

Glad I found this thread. I've been having issues with tabs every now and then and wasn't sure what was causing it. Thanks!

Sorry for the bump, but this may help others.

I am currently working on a custom section for Umbraco 7. Got the same error when I was using tabs.

• no controller: form

Wrapping my view inside a form tag resulted in the following error.

• no controller: valFormManager.

Thanks to a tutorial (by Casper Andersen) I was able to fix these errors. All I had to do was insert the directive val-form-manager to my form tag.

Here's the example code:

<form ng-controller="yourController" submit="save()" val-form-manager>

Hope it helps some of you (rookies like me) out!

is working on a reply...