Create a personalized compilation process that eliminates the two-way binding

Question

Create a personalized compilation process that eliminates the two-way binding

In my Angular 1.5.8 application, I have created an attribute directive called my-directive. I am trying to apply this directive to an element while passing two additional parameters - one with one-way binding (@) and the other with two-way binding (=).

Everything functions as expected until I attempt to customize the directive's compile function in order to include extra attributes. While the one-way binding continues to work correctly, the two-way binding seems to disappear.

You can view the issue on this plunk.

Upon commenting out the compile function, everything returns to normal operation. It appears that I may be unintentionally overriding the default behavior, but I am struggling to identify how to prevent this from happening.

This is my current compile function:

compile: function compile(element, attrs) {
  return {
    pre: function preLink(scope, iElement, iAttrs, controller) {},
    post: function postLink(scope, iElement, iAttrs, controller) {
      if (!iAttrs.compiled) {
        iElement.attr('compiled', true);
        iElement.attr('ng-click', "$ctrl.onClick()");
        $compile(iElement)(scope);
      }
    }
  };
}

javascript angularjs angularjs-directive

Answer 1

Answer №1

The reason behind this behavior is not entirely clear, but it seems that the compilation process only affects child elements in your current setup. To resolve this issue, simply modify your $compile(... line as follows:

$compile(iElement.children())(scope);

UPDATE 1

It appears that the iElement already has its scope defined by the parent scope. This means that the compile will not be able to use the element because isolated scopes only function within directives.

However, the current challenge is how to introduce new directives during the compile phase. You can accomplish this by adjusting your directive code accordingly:

.directive('myDirective', function($compile) {
    return {
      terminal: true,
      priority: 1001,
      restrict: 'A',
      scope: {
        myObject: '=myObject',
        text: '@text'
      },
      transclude: true,
      bindToController: true,
      controller: function() {
        var $ctrl = this;
        $ctrl.onClick = onClick;
        return $ctrl;

        function onClick() {
          alert("clicked");
        }
      },
      controllerAs: '$ctrl',
      template: '<pre>{{$ctrl}}</pre> {{ $ctrl.text }} - {{ $ctrl.myObject.attr1 }}',
      compile: function compile(element, attrs) {
        element.removeAttr("my-directive");
        element.attr('compiled', true);
        element.attr('ng-click', "$ctrl.onClick()");
        return {
          pre: function preLink(scope, iElement, iAttrs, controller) {},
          post: function postLink(scope, iElement, iAttrs, controller) {
            $compile(iElement)(scope);
          }
        };
      }
    };
  });

Answer 2

The reason behind this behavior is not entirely clear, but it seems that the compilation process only affects child elements in your current setup. To resolve this issue, simply modify your $compile(... line as follows:

$compile(iElement.children())(scope);

UPDATE 1

It appears that the iElement already has its scope defined by the parent scope. This means that the compile will not be able to use the element because isolated scopes only function within directives.

However, the current challenge is how to introduce new directives during the compile phase. You can accomplish this by adjusting your directive code accordingly:

.directive('myDirective', function($compile) {
    return {
      terminal: true,
      priority: 1001,
      restrict: 'A',
      scope: {
        myObject: '=myObject',
        text: '@text'
      },
      transclude: true,
      bindToController: true,
      controller: function() {
        var $ctrl = this;
        $ctrl.onClick = onClick;
        return $ctrl;

        function onClick() {
          alert("clicked");
        }
      },
      controllerAs: '$ctrl',
      template: '<pre>{{$ctrl}}</pre> {{ $ctrl.text }} - {{ $ctrl.myObject.attr1 }}',
      compile: function compile(element, attrs) {
        element.removeAttr("my-directive");
        element.attr('compiled', true);
        element.attr('ng-click', "$ctrl.onClick()");
        return {
          pre: function preLink(scope, iElement, iAttrs, controller) {},
          post: function postLink(scope, iElement, iAttrs, controller) {
            $compile(iElement)(scope);
          }
        };
      }
    };
  });

Create a personalized compilation process that eliminates the two-way binding

Answer №1

UPDATE 1

Similar questions

Bring the element into view by scrolling horizontally

How come the JavaScript map() function displays my feature when the forEach() function didn't work? This issue arises while working with React and Next

Utilize Next.js to send an image to an email by leveraging the renderToString function on the API routes

Creating a number of arrays based on the row of a .CSV file can be accomplished in Angular by utilizing the

The issue of page content failing to refresh when loaded using AJAX technology

How can a parameter be added to a query string only when there is a value present in a textbox using JavaScript?

The call stack limit has been exceeded due to the combination of Node, Express, Angular, and Angular-route

Creating an image on an HTML canvas using RGB values

When async/await is employed, the execution does not follow a specific order

What is the best location to declare global variables within a module?

What is the best way to eliminate concealed divs from the view source of a webpage?

Ways to modify the color of cells in a table generated from JSON

Send data between components using Angular directives

What is the best way to incorporate a variable in the find() method to search for similar matches?

Having issues getting Nunjucks templates to render correctly in Express

There seems to be a problem with the full calendar updateEvent feature as it is unable to read the property 'clone'

Determine if a dropdown menu includes a certain string within a designated group option

I just obtained the height measurement of a dynamic table - now I must transfer this height value to a different element

Guide on making an NPM package with a web worker integration

Using Rails' link_to method within Bootstrap modals