2

我正在尝试创建一个指令，将 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">
4

1 回答 1

1

脚本.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>
于 2014-05-29T20:08:27.483 回答