Arrangement of watch attachment and $timeout binding

Question

Arrangement of watch attachment and $timeout binding

I recently encountered a component code that sets the HTML content using

$scope.htmlContent = $sce.trustAsHtml(content)

. Subsequently, it calls a function within a $timeout to search for an element inside that content using $element.find('.stuff')...

This code is contained within a $scope.$watch in the $onInit function.

My concern is whether the DOM element for the content will be completely rendered before the $element.find is executed. Is there a more reliable approach we can take?

Here is the key code snippet for reference:

(function() {
'use strict';

  angular.module('mymodule').component('exampleComponent', {
    templateUrl: 'path/template.html',
    bindings: { content: '<' },
    controller: ExampleComponentCtrl
  });

  function ExampleComponentCtrl($element, $sce, $scope, $timeout) {
    this.$onInit = function() {
      $scope.$watch(function() {
        return $sce.valueOf(self.content);
      }, function() {
        // irrelevant operations that generate a variable 'content' containing HTML code

        $scope.htmlContent = $sce.trustAsHtml(content);

        // Using $timeout to ensure inner HTML injection is complete
        // so that we can effectively locate `.file-link` elements
        $timeout(function() { $element.find('.stuff').each... });
      });
    };
  }
)();

HTML template structure:

<pre ng-bind-html="htmlContent"></pre>

javascript angularjs

Answer 1

Answer №1

Unclear about the intended purpose of this particular component... Take a look at the following code snippet:

function CustomComponentController($element, $scope, $compile) {
    var vm = this;

    vm.$onInit = function() {
    };

    vm.$onChanges = function() {
      if (vm.content) {
        $element.empty();
        $element.append($compile(vm.content)($scope)); // if your HTML does not include Angular, compilation is unnecessary
        console.log('Identified element: ' + $element.find('p')[0].id);
      }
    };
}

Answer 2

Unclear about the intended purpose of this particular component... Take a look at the following code snippet:

function CustomComponentController($element, $scope, $compile) {
    var vm = this;

    vm.$onInit = function() {
    };

    vm.$onChanges = function() {
      if (vm.content) {
        $element.empty();
        $element.append($compile(vm.content)($scope)); // if your HTML does not include Angular, compilation is unnecessary
        console.log('Identified element: ' + $element.find('p')[0].id);
      }
    };
}

Arrangement of watch attachment and $timeout binding

Answer №1

Similar questions

Transferring information between pages in PHP

Sending data from events to a textbox and a div

Enhance the appearance of CodeMirror substrings by applying bold formatting without altering

Failure to trigger AJAX Success or Error Events

Tips for avoiding Netlify's error treatment of warnings due to process.env.CI being set to true

Iterating through a collection of objects, triggering a promise for each object and recording its completion

Creating a copy-paste functionality in my table by utilizing an Angularjs directive

Using the <script> attribute within the <head> tag without the async or defer attributes

Adding elements to a nested array in AngularJS can be achieved by directly accessing the nested

Display historical data upon clicking in AngularJS

I'm interested in learning about the most efficient practices for handling JSON, performing math operations, and utilizing loops in JS/React. What techniques

Using the getElementById function in javascript to modify CSS properties

Conflict between Angular's ng-repeat directive and Sass styling

What method does jQuery Validation use to configure the validation message?

My type is slipping away with Typescript and text conversion to lowercase

Troubleshooting Ng-Switch String Length Issue in AngularJS

How can I set a value using document.getElementById(idPopUPImage).innerHTML to create a static popup in Leaflet?

Tips for showing validation message just one time along with multiple error messages

Link Google Map Marker Click Event with Dynamic Binding

Retrieve data from a text file using ajax and then return the string to an HTML document