AngularJS: директива ng-transclude для входного значения

Я пытаюсь создать директиву, которая добавляет значение ng-transclude к атрибуту значения поля ввода в шаблоне html:

директива, которую я создал:

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/>'
    }
});

ищем что-то, что добавляет значение ng-transclude к атрибуту value в элементе ввода

шаблон:

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

в настоящее время я получаю этот вывод html:

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

но на самом деле мне нужен этот вывод html:

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

javascript angularjs angularjs-directive transclusion
person Ratan    schedule 29.05.2014    source источник
comment
Вы пытались ввести выражение в виде строки? например: ng-show="'value == true'" (обратите внимание на одинарные кавычки внутри двойных кавычек)   -  person J.Wells    schedule 29.05.2014
comment
Нет, ng-show не имеет отношения к этому вопросу. Я имею в виду, что проблема заключается в директиве editInput, где ng-transclude передается неправильным образом для отображения его в атрибуте значения в поле ввода.   -  person Ratan    schedule 29.05.2014

Ответы (1)


arrow_upward
1
arrow_downward

скрипт.js:

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

индекс.html:

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

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

    <edit-input value="true" edit-name="{{person.name}}">{{person.name}}</edit-input>
    {{person.name}}
</body>
</html>
person Rahul Garg    schedule 29.05.2014
comment
Привет, спасибо за ваш ответ. Я получаю выражение {{member.firstname}} вместо Name в атрибуте value элемента ввода: это означает, что я получаю этот вывод html: ‹input ng-show=value == true placeholder= value=„{{person.name} « class=› Но мне нужно что-то вроде этого html-вывода: ‹input ng-show=value == true placeholder= value=«Name» class=› Завтра я постараюсь найти работающее решение. - person Ratan; 30.05.2014
comment
Как насчет обновленного кода? Я удалил функцию компиляции и ввел в html новый атрибут edit-name. Я прочитал этот атрибут в области изоляции директивы и использую его в шаблоне. - person Rahul Garg; 30.05.2014
comment
Да, это то, что я ищу. С новым атрибутом edit-name можно решить мою проблему. Большое спасибо за вашу поддержку! - person Ratan; 30.05.2014