Beyond Umbraco - Hooking AngularJS

decorators-controller.js

angular.module("umbraco").controller("BeyondUmbraco.TreeExtensions", function($scope, notificationsService) {
    $scope.languages = [
        {
            name: 'Hello'
        },
        {
            name: 'Umbraco'
        }
    ];

    $scope.selectedLanguage = $scope.languages[0];

    $scope.selectLanguage = function(language) {
        $scope.selectedLanguage = language;
        $scope.page.languageSelectorIsOpen = false;

        notificationsService.success("You selected: " + language.name);
    }
});

decorators-option1.js

directive.template = directive.template.replace(
    /class="umb-language-picker" ng-if=".*?"/g, 
    "class=\"umb-language-picker\" ng-if=\"languages.length > 1\""
);

decorators-option2.js

directive.template = directive.template.replace(
    "<div class=\"navigation-inner-container\">", 
    "<div class=\"navigation-inner-container\"><div ng-include=\"'/App_Plugins/TreeExtensions/dropdown.html'\"></div>"
);

decorators-todo1.js

angular.module("umbraco.directives").config(function ($provide) {
	//TODO #1
});

decorators-todo2.js

$provide.decorator("umbNavigationDirective", function ($delegate) {
    var directive = $delegate[0];

    //TODO #2

    return $delegate;
});

dropdown-controller.html

<div class="umb-language-picker" ng-controller="BeyondUmbraco.TreeExtensions" ng-if="currentSection === 'media'" deep-blur="page.languageSelectorIsOpen = false" on-outside-click="page.languageSelectorIsOpen = false">

dropdown.html

<div class="umb-language-picker" ng-if="currentSection === 'media'" deep-blur="page.languageSelectorIsOpen = false" on-outside-click="page.languageSelectorIsOpen = false">
    <button type="button" class="umb-language-picker__toggle" ng-click="toggleLanguageSelector()" aria-haspopup="true" aria-expanded="{{page.languageSelectorIsOpen}}">
        <span>
            <span class="sr-only">
                <localize key="visuallyHiddenTexts_currentLanguage">Current language</localize>
                <span>: </span>
            </span>
            <span>{{selectedLanguage.name}}</span>
        </span>
        <umb-icon icon="{{page.languageSelectorIsOpen ? 'icon-navigation-up' : 'icon-navigation-down'}}" class="umb-language-picker__expand icon-navigation-down" aria-hidden="true">&nbsp;</umb-icon>
    </button>
    <div class="umb-language-picker__dropdown" ng-if="page.languageSelectorIsOpen">
        <button
            type="button"
            class="umb-language-picker__dropdown-item"
            ng-class="{'umb-language-picker__dropdown-item--current': language.active}"
            ng-click="selectLanguage(language)"
            ng-repeat="language in languages | orderBy:'name'"
        >
        <span class="sr-only">
            <localize key="visuallyHiddenTexts_switchLanguage">Switch language to</localize>
            <span>: </span>
        </span>
        <span>{{language.name}}</span>
        </button>
    </div>
</div>

package.manifest

{
    "javascript": [
        "~/App_Plugins/TreeExtensions/decorators.js"
    ]
}

umb-navigation.html

<div class="umb-language-picker" ng-if="currentSection === 'content' && languages.length > 1" deep-blur="page.languageSelectorIsOpen = false" on-outside-click="page.languageSelectorIsOpen = false">

umbnavigation.directive.js

/**
* @ngdoc directive
* @name umbraco.directives.directive:umbNavigation
* @restrict E
**/
function umbNavigationDirective() {
    return {
        restrict: "E",    // restrict to an element
        replace: true,   // replace the html element with the template
        templateUrl: 'views/components/application/umb-navigation.html'
    };
}

angular.module('umbraco.directives').directive("umbNavigation", umbNavigationDirective);