Hello Guys,
I'm trying to implement a custom section. i've follow some some blog posts like :http://www.enkelmedia.se/blogg/2013/11/22/creating-custom-sections-in-umbraco-7-part-1.aspx and
http://www.nibble.be/?p=440 and off course also the belle documentation and tutorials.
The custom section is working ok, i can load umbraco backend open my tree, and also the custom editor.html is loading ok on view. But everytime i load the view editor, the first tab is visualy selected but the content is not displayed. i've always this js error on console
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 HTMLAnchorElement.<anonymous> (http://localhost:49314/umbraco/lib/angular/1.1.5/angular-mobile.js:269:13) <li ng-class="{active: $first, 'tab-error': tabHasError}" ng-repeat="tab in visibleTabs" val-tab="" class="ng-scope">
My angular controller is more or less like this:
'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;
if ($scope.id == "hotels") {
$scope.content = { tabs: [{ id: 1, label: "Lista de hoteles" }, { id: 2, label: "Subir Hoteles" }] };
$.get('/Backend/Hoteis', function (view) {
$("#tab1 .umb-pane").html(view);
});
$.get('/Backend/Index', function (view) {
$("#tab2 .umb-pane").html(view);
});
} else if ($scope.id=="seguros") {
$scope.content = { tabs: [{ id: 1, label: "Seguros" }, { id: 2, label: "Subir Hoteles" }] };
$.get('/Backend/Seguros', function (view) {
$("#tab1 .umb-pane").html(view);
});
$.get('/Backend/Index', function (view) {
$("#tab2 .umb-pane").html(view);
});
}
else {
$scope.content = { tabs: [{ id: 1, label: "fligths" }, { id: 2, label: "Subir Hoteles" }] };
$.get('/Backend/Voos', function (view) {
$("#tab1 .umb-pane").html(view);
});
}
};
angular.module("umbraco").controller('ProductSection.ProductTree.ProductTreeEditController', productTreeEditController);
})();
and my view:
<div ng-controller="ProductSection.ProductTree.ProductTreeEditController">
<umb-panel>
<umb-header tabs="content.tabs">
<div class="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>
Note: i'm using jquery to load a partial view from mvc controller because i don't know how to do it using angularjs.
This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/61679-adding-a-tab-custom-section-angular-errors