Tips for implementing dynamic templates within an AngularJS directive

Question

Tips for implementing dynamic templates within an AngularJS directive

I am looking to develop a dynamic directive. This directive will have a template with an input element, and this element's ng-model attribute needs to be dynamic, utilizing $scope.name in the controller.

app.directive('helloWorld', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
              name: '@',
              path:'@',
        },
        template: '<input\
             type="text"\
             name="{{name}}"\
             ng-model="{{name}}"\
              />\,
        link: function(scope, elem, attrs) {

        },
        controller:{
          $scope.$watch($scope.name, function (newValue, oldValue) {
            }
        }
    });

javascript angularjs

Answer 1

Answer №1

Check out this functional JSFiddle

Code Example:

var app = angular.module('app',[])
app.directive('helloWorld', function() {
   return {
   restrict: 'E',
scope: {
     name: '@',
     path:'@',
  },

   template: '<input type="text" name="{{name}}" ng-model="name"/> {{name}}',
 controller: function($scope) {
   $scope.name = "default value";
   $scope.$watch('name', function (newValue, oldValue) {
       console.log("New Value: ", newValue);
   })
 }

} });

Answer 2

Check out this functional JSFiddle

Code Example:

var app = angular.module('app',[])
app.directive('helloWorld', function() {
   return {
   restrict: 'E',
scope: {
     name: '@',
     path:'@',
  },

   template: '<input type="text" name="{{name}}" ng-model="name"/> {{name}}',
 controller: function($scope) {
   $scope.name = "default value";
   $scope.$watch('name', function (newValue, oldValue) {
       console.log("New Value: ", newValue);
   })
 }

} });

Answer 3

Answer №2

Initially, there seems to be an issue with your directive syntax. Here is the corrected version:

app.directive('helloWorld', function() {
   return {
     restrict: 'E',
      scope: {
        name: '@',
        path:'@',
      },
     template: '<input type="text" name="{{name}}" ng-model="name">',
     link: function(scope, elem, attrs) {
  
     },
     controller: function($scope) {
       $scope.name = 'asd';
       $scope.$watch('name', function (newValue, oldValue) {

       })
     }
  }
});

Furthermore, if you wish to have a dynamic model, it is recommended to use scope: {name: '='} instead of @ which is for one-time binding.

update

Modified name="name in the template to name="{{name}}"

Check out this demo as well

Answer 4

Initially, there seems to be an issue with your directive syntax. Here is the corrected version:

app.directive('helloWorld', function() {
   return {
     restrict: 'E',
      scope: {
        name: '@',
        path:'@',
      },
     template: '<input type="text" name="{{name}}" ng-model="name">',
     link: function(scope, elem, attrs) {
  
     },
     controller: function($scope) {
       $scope.name = 'asd';
       $scope.$watch('name', function (newValue, oldValue) {

       })
     }
  }
});

Furthermore, if you wish to have a dynamic model, it is recommended to use scope: {name: '='} instead of @ which is for one-time binding.

update

Modified name="name in the template to name="{{name}}"

Tips for implementing dynamic templates within an AngularJS directive

Answer №1

Answer №2

update

Check out this demo as well

Similar questions

Expanding the reach of the navigation bar

Hover over or click to automatically focus on the input field

What is the method to determine the size of an array of objects where each object contains its own internal array?

Retrieve data from specified <td> element in an ASP.NET MVC application

We apologize, but the module you are looking for cannot be found: Unable to locate 'fs'

Using Javascript to fetch undefined data from a C# backend with AJAX

The best way to dynamically render HTML based on screen size using server-side rendering in Vue/Nuxt

React transmits an incorrect argument through the function

Creating Tree diagrams with pie charts using D3

Incorporating user input into a div element

Is the Messenger Bot ignoring random users?

Utilizing Algolia search hits in conjunction with React Router: A guide

"Setting up a filter for the first row in an Excel-like table using a pin header

Using jQuery to create a drop-down menu

Using the Google Identity Services JavaScript SDK in conjunction with Vue and TypeScript: A comprehensive guide

Save all dynamically received data from a form in PHP as an array

Issues with alignment in Bootstrap Table columns

How come my _.some function consistently returns false when using lodash library?

Using string.startsWith() with Wildcards or Regular Expressions

Updating a List Conditionally in React