I’m struggling to overcome issues in my custom view because my custom controller only seems to partially be working. I am implementing a custom back office search feature and intercepting clicks on the search button in the UI and opening my own overlay. The overlay opens my custom view as intended. using the following code:
const overlay = {
title: "Global Search",
view: "/App_Plugins/Example/backoffice/GlobalSearch/GlobalSearchOverlay.html",
size: "medium",
submit: function(model) {
console.log("Example Global Search Override: Submit called", model);
},
close: function() {
console.log("Example Global Search Override: Close called");
}
};
editorService.open(overlay);
A simplified version of my view looks like this:
<div class="global-search" ng-controller="Example.GlobalSearch.controller as vm">
<!-- Debug Info -->
<div class="debug-panel">
<p><strong>Debug Info:</strong></p>
<p>Controller Initialized: {{ vm.isInitialized }}</p>
<p>Debug: {{ vm.isDebug }}</p>
<p>Filter Types Count: {{ vm.typeFilters.length }}</p>
<p>Selected Filters: {{ vm.getSelectedFilterCount() }}</p>
<p>Current Term: "{{ vm.term }}"</p>
<p>Results Count: {{ vm.results.length }}</p>
<p>Is Loading: {{ vm.isLoading }}</p>
</div>
<div class="search-container">
<div class="search-input-wrapper">
<input type="text"
ng-model="vm.term"
placeholder="Search content or media..."
ng-change="vm.onSearch()"
class="umb-textstring"
autofocus/>
<button
class="btn btn-primary"
ng-click="vm.triggerSearch()"
ng-disabled="!vm.term && vm.getSelectedFilterCount() === 0">
Search
</button>
</div>
</div>
</div>
And a simplified version of my controller in typescript before compilation looks like this:
angular.module("umbraco").controller("Example.GlobalSearch.controller", [
"$http",
"$scope",
"$timeout",
"editorService",
function ($http: any, $scope: any, $timeout: any, editorService: any) {
console.log('Global Search Controller: Initializing...');
console.log($scope);
const vm = this;
console.log("vm at startup:", vm);
// Initialize properties
vm.isDebug = true;
vm.term = "";
vm.results = [];
vm.typeFilters = [];
vm.isLoading = false;
vm.hasSearched = false;
vm.isInitialized = false;
/**
* Get selected filter count
*/
vm.getSelectedFilterCount = function(): number {
try {
if (!vm.typeFilters || !Array.isArray(vm.typeFilters)) {
return 0;
}
return vm.typeFilters.filter((t: any) => t && t.selected === true).length;
} catch (e) {
console.error('Error in getSelectedFilterCount:', e);
return 0;
}
};
vm.onSearch = function (): void {
console.log('Global Search: onSearch called with term:', vm.term);
};
vm.onFilterChange = function(): void {
console.log('Global Search: Filter changed');
if (searchTimeout) {
$timeout.cancel(searchTimeout);
}
vm.performSearch();
};
vm.clearAllFilters = function(): void { };
vm.performSearch = function (): void {
console.log('Global Search: performSearch called');
};
vm.triggerSearch = function(): void {
console.log('Global Search: Manual search triggered');
};
vm.close = function (): void {
console.log('Global Search: Closing overlay');
};
vm.openItem = function (item: any): void {
console.log('Global Search: Opening item:', item);
};
vm.loadFilterTypes = function (): void {
console.log('Global Search: Loading filter types...');
};
// Initialize immediately
console.log('Global Search: Starting initialization...');
vm.loadFilterTypes();
console.log('Global Search Controller: Setup complete');
}
]);
None of my console logging occurs in my controller, only a few select properties such as the following
- getEditUrl: ƒ (s)
- isLoading: false
- onSearch: ƒ ()
- performSearch: ƒ ()
- results:
- term: “”
- typeFilters:
…but the rest are missing. Something seems to be fundamentally wrong with the controller binding and I think I have been looking at it for too long now to try and spot any obvious mistakes.
Can anyone suggest what I am missing or doing wrong please?
Thanks