Using ng-transclude directive in AngularJS for input values

Question

Using ng-transclude directive in AngularJS for input values

My goal is to develop a directive that includes the ng-transclude value in the input field's value attribute within an HTML template:

The directive I have created:

module.directive('editInput', function(){
    return {
        restrict: 'E',
        scope: {
            value: '='
        },
        transclude: true,
        template: '<p ng-show="value == false" ng-transclude></p>' +
        '<input ng-show="value == true" placeholder="" value="" ng-transclude/>'
    }
});

I am looking for a solution that adds ng-transclude value to the value attribute of the input element.

Here is the template in use:

<edit-input value="isEditModeActive">{{person.name}}</edit-input>

Currently, the generated HTML output looks like this:

<input ng-show="value == true" placeholder="" value="" ng-transclude="" class="">
<span class="ng-binding">Name</span></input>

However, the desired HTML output should be:

<input ng-show="value == true" placeholder="" value="Name">

javascript angularjs angularjs-directive transclusion

Answer 1

Answer №1

code.js:

angular.module('app', [])
.controller('ctrl', function($scope) {
  $scope.user = {};
  $scope.user.name = 'Alice';
})
.directive('editField', function(){
    return {
        restrict: 'E',
        scope: {
            data: '=',
            editValue: '@'
        },
        transclude: true,
        template: 
        '<p ng-show="data == false" ng-transclude></p>' +
        '<input ng-show="data == true" placeholder="" value="{{editValue}}" />'
    }
});

home.html:

<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8>
    <title>Home Page</title>
</head>
<body ng-controller="ctrl">
    <script src= "angular.js"></script>

    <script src= "code.js"></script>

    <edit-field data="true" edit-value="{{user.name}}">{{user.name}}</edit-field>
    {{user.name}}
</body>
</html>

Answer 2

code.js:

angular.module('app', [])
.controller('ctrl', function($scope) {
  $scope.user = {};
  $scope.user.name = 'Alice';
})
.directive('editField', function(){
    return {
        restrict: 'E',
        scope: {
            data: '=',
            editValue: '@'
        },
        transclude: true,
        template: 
        '<p ng-show="data == false" ng-transclude></p>' +
        '<input ng-show="data == true" placeholder="" value="{{editValue}}" />'
    }
});

home.html:

<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8>
    <title>Home Page</title>
</head>
<body ng-controller="ctrl">
    <script src= "angular.js"></script>

    <script src= "code.js"></script>

    <edit-field data="true" edit-value="{{user.name}}">{{user.name}}</edit-field>
    {{user.name}}
</body>
</html>

Using ng-transclude directive in AngularJS for input values

Answer №1

Similar questions

Nextjs attempting to access local storage without proper initialization

Tips for creating a custom filter to sift through an array of objects by comparing their values with those in a separate object

Click on the checkbox to activate it using JavaScript

Loading screen for specific content within the current WordPress theme

The viewport width in NextJS does not extend across the entire screen on mobile devices

Activate Bootstrap modal using an anchor tag that links to a valid external URL as a fallback option

What is the best approach to modify the model value when a controller function is triggered?

Webpack fails to handle CSS background images

Is it detrimental to my search engine ranking if I utilize CSS display:none?

How can I mirror just one side of a texture in Three.js / WebGL?

Is it possible to animate share buttons using Framer Motion but staggering siblings?

JavaScript - creating mathematical expressions without the need for operator overloading

Version 4.6.4 of TypeScript is flagging the code as invalid

Find the matching ID and consolidate all the information under one single ID

Tips for implementing an HTML modal with AngularJS binding for a pop up effect

Extract the content from the division and set it as the image source

The ng-model remains empty even after the $parent has been defined

When a menu item is clicked, apply a class and change the display property to

How can I efficiently make a dropdown menu with search functionality instead of using datalist?

The www file is only loaded by Node Inspector when the preload setting is turned off