The parental context is not bound to the isolated scope of the custom directive

Question

The parental context is not bound to the isolated scope of the custom directive

Below is the custom directive implemented:

(function() {
    angular.module('commentsDirective', [])

    .directive('mngComments', mngComments)

    function mngComments() {
        return {
            restrict: 'AE',
            scope: { },
            templateUrl: '/comments/comments.html',
            controller: 'CommentsController',
            controllerAs: 'vm',
            bindToController: {   
                moment: '=',
                comments: '=',
                showComments: '='
            }
        };
    };
})();

Usage of the directive and passing values:

<div mng-comments moment="vm.moments[0]" comments="vm.comments" showComments="true"></div>

There is a hard-coded "true" in showComments. However, in the comments.html file:

comments {{vm.showComments}}

The displayed value is {{vm.showComments}} without any assigned value. It simply shows 'comments'. vm.moments and vm.comments are being correctly passed.

javascript angularjs

Answer 1

Answer №1

(function() {
    angular.module('notesDirective', [])
    
    .directive('mngNotes', mngNotes)
    
    function mngNotes() {
        return {
            restrict: 'AE',
            scope: { },
            template: '<div>example {{vm.displayNotes}}</div>',
            controller: function(){},
            controllerAs: 'vm',
            bindToController: {   
                point: '=',
                notes: '=',
                displayNotes: '='
            }
        };
    };
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"></script>

<div ng-app="notesDirective">
  <div mng-notes
       point="vm.points[0]"
       notes="vm.notes"
       display-notes="true">
  </div>
</div>

Just remember to use hyphen case in the HTML for bindings/scope properties that are in the JavaScript. HTML is not case sensitive, so use the hyphen instead of camel casing.

Answer 2

(function() {
    angular.module('notesDirective', [])
    
    .directive('mngNotes', mngNotes)
    
    function mngNotes() {
        return {
            restrict: 'AE',
            scope: { },
            template: '<div>example {{vm.displayNotes}}</div>',
            controller: function(){},
            controllerAs: 'vm',
            bindToController: {   
                point: '=',
                notes: '=',
                displayNotes: '='
            }
        };
    };
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js"></script>

<div ng-app="notesDirective">
  <div mng-notes
       point="vm.points[0]"
       notes="vm.notes"
       display-notes="true">
  </div>
</div>

Just remember to use hyphen case in the HTML for bindings/scope properties that are in the JavaScript. HTML is not case sensitive, so use the hyphen instead of camel casing.

The parental context is not bound to the isolated scope of the custom directive

Answer №1

Similar questions

When leaving the page, onBeforeUnload function aborts any ongoing HTTP requests

When you click on the Admin Panel Side menu, the page refreshes instead of expanding the menu item

Unable to trigger onActivated in Quasar (Vue 3) component

What are the restrictions of using the Angular orderby array function?

JavaScript tag filtering system: Display only the div elements that contain all the specified classes in an array; otherwise, hide them

Unexpected behavior: Angular4/Javascript Date object alters when timezone is specified in Date constructor

Encountering a WriteableDraft error in Redux when using Type Definitions in TypeScript

Troubles arising from React component integration with Gatsby JS

Why is it displaying undefined even though there is data stored in Firebase?

Unable to sort array within a computed property in Vue.JS

The Middleware does not catch Promise rejections that occur with await

Using an onclick function to increment and decrement values

Adjust the CSS property of a div to have a fixed position when scrolling

The required validator in Mongoose is not being triggered by the function

Exploring jQuery: Choosing all li elements starting from a specific index to the end

Does SameSite=Lax grant permission for GET requests from third-party sources?

How can you leverage Symfony to iterate through a JSON array efficiently?

The Angular application is experiencing issues following an update from version 11 to version 12

How can I showcase data retrieved from a function using Ajax Datatable?

Using jQuery to select the next table cell vertically