我正在尝试创建一个指令，将 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 值添加到 input 元素中的 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">
最佳答案
脚本.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}}" />'
}
});
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>
关于javascript - Angular : directive ng-transclude to input value，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23941746/