Javascript AngularJS：指令ng transclude到输入值_Javascript_Angularjs_Angularjs Directive_Transclusion

Javascript AngularJS：指令ng transclude到输入值

javascript angularjs

Javascript AngularJS：指令ng transclude到输入值,javascript,angularjs,angularjs-directive,transclusion,Javascript,Angularjs,Angularjs Directive,Transclusion,我正在尝试创建一个指令，将ng TRANCLUDE值添加到html模板中的输入字段值属性：指令我创建了： module.directive('editInput', function(){ return { restrict: 'E', scope: { value: '=' }, transclude: true, template: '<p ng-show="value =

我正在尝试创建一个指令，将ng TRANCLUDE值添加到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/>'
    }
});

module.directive（'editInput'，function（）{
返回{
限制：'E'，
范围：{
值：'='
},
是的，
模板：''+
''
}
});

正在查找在输入元素中添加ng transclude值对值属性的内容

模板：

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

{{person.name}

目前，我获得以下html输出：

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

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


名称

但我确实需要这个html输出：

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

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

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

angular.module（'app'，[]）
.controller（'ctrl'，函数（$scope）{
$scope.person={}；
$scope.person.name='Rahul'；
})
.directive（'editInput'，function（）{
返回{
限制：'E'，
范围：{
值：'='，
editName:“@”
},
是的，
模板：
“”+
''
}
});

index.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.name}
{{person.name}

是否尝试将表达式作为字符串输入？例如：

ng show=“'value==true'”

（注意双引号中的单引号）不，ng show与问题无关。我的意思是，问题是在指令editInput中，ng transclude以错误的方式传递，因为它显示在输入字段的值属性中。您好，谢谢您的回答。我在输入元素的value属性中得到表达式{{member.firstname}}，而不是Name：这意味着我得到了这个html输出：但是我需要这样的html输出：明天我将尝试找到一个工作解决方案。更新的代码如何？我删除了compile函数，并在html中引入了一个新的属性编辑名称。我在指令的隔离范围中读取该属性，并在模板中使用它。是的，这就是我要寻找的。使用新的属性编辑名称可以解决我的问题。非常感谢您的支持！