0

我正在尝试用 Angular 创建一个通用指令，例如，使用这个 html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Testing directives</title>
    <script src="../scripts/angular.js"></script>
    <script type="text/javascript">
        angular.module('ngDirTest', [
                //controllers
        ])
    </script>
    <script src="../scripts/populate.js"></script>
    <script src="../Directive/GenericDirective.js"></script>
</head>

<body ng-app="ngDirTest">

<div ng-controller="PopulateCtrl">
    <div generic-directive ng-model="nameone"></div>
    <div generic-directive ng-model="nametwo"></div>
    <div generic-directive ng-model="namethree"></div>
    <div generic-directive ng-model="namefour"></div>
    <div generic-directive ng-model="namefive"></div>
    <div generic-directive ng-model="namesix"></div>
</div>

</body>
</html>

并采取这个控制器：

angular.module("ngDirTest").controller('PopulateCtrl', ['$scope', function($scope) {

    //

}]);

并接受这个指令：

angular.module('ngDirTest').directive('genericDirective', [ function() {
    return {
        restrict: 'A',
        scope: {
            fn: "&"
        },
        template: '<input type="text" ng-model=name placeholder="type a name" />',

        link: function(scope) {
            scope.$watch('name', function(val) {
                //
            })
        }
    }
}]);

这个想法是有一个模板，可以为不同的文本输入标签提供不同的占位符。有没有好的方法来做到这一点？

我正在考虑从正在观看的输入文本中获取模型，然后对其进行处理，但这无助于我设置占位符并初始化输入文本字段。

4

1 回答 1

0

将“占位符”添加到指令模型（请参阅通过模型更改输入占位符的值？），或使用模板函数从指令属性进行设置。

我无法将它从隔离范围绑定（我仍在学习这些东西），但这里有一个使用模板函数的示例： http: //embed.plnkr.co/R8uq77sA1bGPNLUnVLW5/preview

具体来说， set template: templateFactory，然后将其placeholder放入指令标记中：

var templateFactory = function($el, attrs) {
  return '<input type="text" ng-model="model" placeholder="' + (attrs.placeholder || 'default placeholder') + '" />'
}
于 2014-08-18T19:14:08.563 回答