How to use angular in a fancybox dynamically shown by jquery

In a brownfield application I encountered a old fancybox jquery plugin. This plugin was used throughout the whole application. This fancybox is just a modal dialog.

I wanted the content of the fancybox to be handled by angular.

 

To accomplish this, I used the following code:

 

image

 

 

You can find the code at:

 

https://github.com/roelvanlisdonk/Research/tree/master/Base/Web/src/Web/wwwroot/blog/fancybox

Server side resource rendering with Angular and ASP .NET MVC: pass data from html to controller.

I wanted a ASP .NET MVC view (*.cshtml) to render on the server and pass the static text contained in the the ASP .NET project resource file to an Angular controller, so on the initial page request, all static data is returned to the client. Dynamic data, like grid content would then be requested by a separate JSON call.

The resource data is passed to the Angular controller by using ng-init.

 

For the sake of this blog post I stuffed everything in one *.cshtml page, including CSS en JavaScript.

Of course this would be separate files in an real application.

 

Project resource file

image

 

Layout.cshtml

 

<!DOCTYPE html> <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="app"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Send initialization data from HTML to Angular controller</title> <style> /* Add some initial styling. */ html, body { background-color: #F1F1F1; font-family: "Open Sans", sans-serif; font-size: 13px; height: 100%; } body { margin: 20px; } [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } </style> <!-- Library scripts --> <script src="https://code.angularjs.org/1.4.1/angular.min.js"></script> </head> <body ng-cloak> @RenderBody() <div> <div ng-controller="main" ng-init="resources={ textFromResource: '@WebApplication1.Properties.Resources.TextFromResource'}"> <h1>{{ title }}</h1> {{ resources.textFromResource }} </div> </div> <script> // Angular module. (function () { "use strict"; angular .module("app", []); }()); // Angular controller. (function () { "use strict"; function controller($scope) { $scope.title = "Show ASP .NET MVC resoure (*.resx) data to user on initial load."; } angular .module("app") .controller("main", ["$scope", controller]); }()); </script> </body> </html>

 

 

Result

image

How to manually get Angular services in TypeScript

If you manually want to get / use Angular services in TypeScript you can use the following code:

 

/// <reference path="../libraries/angular/angular.d.ts" />

module app {
    "use strict";

    var appModule = angular.module("app", []);
    var injector: angular.auto.IInjectorService = angular.injector(["ng"]);
    var httpService: angular.IHttpService = injector.get("$http");
    var qService: angular.IQService = injector.get("$q");
}

How to fix: can’t type in textbox inside kendo sortable

I had some input type=”text” html elements inside a kendo sortable. These textboxes couldn’t get focus, I was unable to type in the textbox, due to the fact it was inside a “draggable” element.

(first I thought it was the css property “user-select”, but that was not the case).

 

The fix is documented on the kendo api site:

http://docs.telerik.com/kendo-ui/web/sortable/overview#sortable-widget-with-focus-able-input-elements

 

image

AngularJS onload image custom directive

If you want to execute some code, when an image is fully loaded, you can use an custom directive in AngularJS, something like:

(function () {
    /// <summary>
    /// Bind to onload event, e.g. onload image.
    /// </summary>
    "use strict";

    function directive() {
        
        function link($scope, $element, attrs) {

            $element.bind('load', function () {

                $scope.options.load($element[0]);
                
            });

        }

        return {
            restrict: "A",
            scope: {
                options: "=htoOnload"
            },
            link: link
        };
    }

    angular
        .module("hto")
        .directive("htoOnload", [directive]);

}());

Usage:

<img id="locationImage" ng-src="{{ app.locationImageUrl }}" hto-onload="{ load: app.onLocationImageLoad }" />

The $scope contains an object “app” containing a function “onLocationImageLoad”.

The image is dynamically loaded by AngularJS, when the app.locationImageUrl changes.