Is it possible to create a dynamic HTML element with an AngularJS Directive without using $scope?

Question

Is it possible to create a dynamic HTML element with an AngularJS Directive without using $scope?

Looking to use This Plunker example code to dynamically add elements to an HTML page using AngularJS. (Make sure to run it in a separate link, not in the editor environment.) This will be my first time working with AngularJS Directives (aside from simple testing). I have a couple of questions regarding this code snippet:

I typically use the Controller as syntax instead of $scope in my controllers. What changes should I make to the sample code above since it uses $compile(...)($scope)?
Is the scope in a Directive related to the controller? If I can remove the scope reference from the controller in this scenario, do I need to make any adjustments to the directive?

javascript angularjs angularjs-directive angularjs-scope angularjs-controlleras

Answer 1

Answer №1

1) When using the controller as syntax, replace $compile(...)($scope) with $compile(...)(vm). Also, use vm or this instead of $scope for all functions and variables.

var vm = this;

Therefore, instead of $scope.list, use vm.list and apply the same change for functions.

$scope.do = function() ..

  vm.do = function() ....

2) Include controllerAs in directives like this:

app.directive('myDirective', function () {
  return {
    scope: {},
    controller: function () {
      this.name = 'Elnaz'
    },
    controllerAs: 'ctrl',
    template: '<div>{{ctrl.name}}</div>'
  };
});

If you need to reference an external controller, do this:

app.directive('myDirective', function () {
  return {
    restrict: 'A',
    controller: 'EmployeeController',
    controllerAs: 'ctrl',
    template: ''
  };
});

In your view, make the following changes:

<div ng-controller="myController as ctrl">
   {{ctrl.name}}

   <button type="button" ng-click="ctrl.do()">Do</button>
</div>

Edit: working demo

Answer 2

1) When using the controller as syntax, replace $compile(...)($scope) with $compile(...)(vm). Also, use vm or this instead of $scope for all functions and variables.

var vm = this;

Therefore, instead of $scope.list, use vm.list and apply the same change for functions.

$scope.do = function() ..

  vm.do = function() ....

2) Include controllerAs in directives like this:

app.directive('myDirective', function () {
  return {
    scope: {},
    controller: function () {
      this.name = 'Elnaz'
    },
    controllerAs: 'ctrl',
    template: '<div>{{ctrl.name}}</div>'
  };
});

If you need to reference an external controller, do this:

app.directive('myDirective', function () {
  return {
    restrict: 'A',
    controller: 'EmployeeController',
    controllerAs: 'ctrl',
    template: ''
  };
});

In your view, make the following changes:

<div ng-controller="myController as ctrl">
   {{ctrl.name}}

   <button type="button" ng-click="ctrl.do()">Do</button>
</div>

Edit: working demo

Answer 3

Answer №2

Solution for the 1st point:

Within the controller, define a variable to represent "controller as";

let vm = this;
All the properties previously bound to $scope will now belong to vm
In the HTML: Use this syntax to bind controller with div:
```
<div ng-controller="customCntrl as vm"
```
When referencing scope properties in the view, prefix them with vm like this: vm.name
For directives: To bind controller with "controller as":

app.directive('customDir', function() { return { controller: 'customCntrl', controllerAs: 'vm', ...
```
            }
        }); 
```

Solution for the 2nd point:

You can still use broadcast and emit on 'vm' like so:

$scope.$watch('vm.name', function() { $scope.$broadcast('topic-123', 'msg'); });

To capture it: $scope.$on('topic-123', function(event, msg) {});

Answer 4

Solution for the 1st point:

Within the controller, define a variable to represent "controller as";

let vm = this;
All the properties previously bound to $scope will now belong to vm
In the HTML: Use this syntax to bind controller with div:
```
<div ng-controller="customCntrl as vm"
```
When referencing scope properties in the view, prefix them with vm like this: vm.name
For directives: To bind controller with "controller as":

app.directive('customDir', function() { return { controller: 'customCntrl', controllerAs: 'vm', ...
```
            }
        }); 
```

Solution for the 2nd point:

You can still use broadcast and emit on 'vm' like so:

$scope.$watch('vm.name', function() { $scope.$broadcast('topic-123', 'msg'); });

To capture it: $scope.$on('topic-123', function(event, msg) {});

Is it possible to create a dynamic HTML element with an AngularJS Directive without using $scope?

Answer №1

Answer №2

Similar questions

Is there a way to retrieve real-time information using momentjs in a Vue.js application without needing to refresh the

The position of the child element is not correct when the parent element is transformed in two dimensions

What is the best method for excluding undefined values from arrays in javascript?

What is the best way to incorporate javascript assets selectively in SailsJS?

Unable to properly utilize environment variables on Vercel when using Nuxt framework

Tips for accessing and adjusting an ngModel that is populated by an attribute assigned via ngFor

What is the process for decoding HTML content that is wrapped within JSON data?

What is the process for linking a ReactJs frontend project folder with a NodeJs backend?

Deactivate buttons: saving data exclusively for the most recent click

Set a click listener on a button within Ext.window.MessageBox

What is the solution for fixing an error that says "There is no 'style' property on the 'Element' type"?

Is it recommended to exclude the package-lock.json file from being tracked in version control by adding it to

Assigning text to textarea according to the content in the input field

When two dynamically sized divs are contained within a parent div with a maximum height, the second div should be positioned at the bottom

What is causing the permissions in firestore to not function properly?

RSS feed showing null xml data with jQuery

MongoDB failing to store model information

Error: The TVJS Framework encountered a JSON Parse issue due to an unexpected EOF

How can I update the color of table rows after the ng-repeat has been implemented?

Attempting to employ $set in conjunction with stringify, unfortunately without success