Using textangular functions in angular controller?

Question

I am new to angular and am trying to alter the default behavior of a textangular text input field on my site's backend (I am a guitarist, not a web developer, but can usually figure out what I need to do...). The field has an option to specify a youtube url and then textangular converts that to an image for purposes of editing in the backend. Then in front end textangular has means to have a youtube url displayed correctly as an iframe.

However, on the front end I am not using angular and I read that in my case, to get a youtube embed to show up in front end as iframe you have to use the taApplyCustomRenderers function.

For example, see here:

how to strip placeholder img in textAngular editor in scope var?

In my angular app, here are some of the relevant lines:

angular.module('dashboard')
.controller('EditController', ['$scope', '$http', '$location', '$routeParams', function ($scope, $http, $location, $routeParams) {

$scope.save = function () {
    $scope.busy = true;
    // I thoguht I could do this:
    $scope.somefield = taApplyCustomRenderers($scope.somefield);
    // then I would save to model
    });

I am getting error that taApplyCustomRenderers is undefined. I thought based on what I read that taApplyCustomRenderers is an available function when using textangular but being new to this I suppose I am missing some key step about injecting the function into the controller or something.

Hoping someone can shed some light.

Thanks in advance! Brian

Answer 1

TLDR; When you try to access taApplyCustomRenderers you are recieving an error since it is not given to this current function, Inject the function and it will work.

The Problem

While I have never actually tried using textAngular, let me explain what the problem is, and from there it should be easy to find the solution.

Your EditController is just a regular javascript function that gets run and attached to the relevant DOM element, so it only has access to functions that are declared in its own scope (or globally).

Here is your exact code just indented differently so you can understand better:

angular.module('dashboard').controller(
    'EditController',
    [
        '$scope',
        '$http',
        '$location',
        '$routeParams', 
        function ($scope, $http, $location, $routeParams) {
            ...
            $scope.somefield = taApplyCustomRenderers($scope.somefield);
        }
    ]
);

As you can see, the controller function has two parameters, the first being a string and the second an array, and the last element in the array is just a regular function.

The solution

Checking the textAngular documentation I saw that the taApplyCustomRenderers is a factory, which means you can inject it into your controller function as so:

angular.module('dashboard').controller('EditController', 
    ['$scope', '$http', '$location', '$routeParams', 'taApplyCustomRenderers',
     function ($scope, $http, $location, $routeParams, taApplyCustomRenderers) { 
         taApplyCustomRenderers(); // is now Available.
     }
    ]);