0

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

Brian
  • 125
  • 2
  • 15
  • Angular is not the same as angularJS : although they share the same name, they have next to nothing in common. I am editing your tags so that you get more answers to your question (and I'll see if I can help too) –  Oct 18 '18 at 13:20
  • Are you saying you have a back-end made with Angular and a front-end not using Angular ? That's is very unclear in your question ... –  Oct 18 '18 at 13:22
  • Hi, yes in front end it is purely Laravel, pulling directly from the database for display, whereas in backend the textangular text editor I use to add my content is applying all sorts of sanitization for security reasons. Thanks! Brian – Brian Oct 18 '18 at 13:31
  • What exactly are you calling back-end and front-end ? To be clear, Angular (and AngularJS) are front-end frameworks in the sense that they are executed on the user's computer, not on the server (like PHP would). So do you mean "back-office" (second application to manage your data) instead of back-end ? –  Oct 18 '18 at 13:34
  • I meant back end as in the admin section of my website, where I enter guitar lesson material, and I meant front end as in what visitors see. thanks, Brian – Brian Oct 18 '18 at 13:53
  • Okay, it's clearer now, thank you ! In the code you have provided, there doesn't seem to be any declaration of `taApplyCustomRenderers`, would you mind posting your whole code ? –  Oct 18 '18 at 13:54
  • Yeah, I just saw the below post and sure enough all is working now! Thanks for the patience! – Brian Oct 18 '18 at 15:49

1 Answers1

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.
     }
    ]);
Rabbi Shuki Gur
  • 1,656
  • 19
  • 36