Angular js创建一个通用指令答案

【问题标题】：Angular js creating a generic directiveAngular js创建一个通用指令
【发布时间】：2014-08-05 13:15:13
【问题描述】：

我正在尝试在 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) {
                //
            })
        }
    }
}]);

这个想法是有一个模板，可以为不同的文本输入标签提供不同的占位符。有什么好办法吗？

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

【问题讨论】：

“不同文本输入标签的不同占位符”是什么意思？
@CemOzer 所以“placeholder=type a name”取决于字段是动态的，所以它可能是一个人的名字，另一个可能是车辆的名称，另一个可能是一个名字对于动物......等等......
@CemOzer 我可以不只是在 div 标签中添加一个名称，然后在模板中执行 $scope.name 或类似的操作吗？
看看这篇文章，stackoverflow.com/questions/14777841/…。接受的答案应该会给你一个很好的起点。

标签： angularjs angularjs-directive angular-directive

【解决方案1】：

将“占位符”添加到指令模型（参见Change value of input placeholder via model?），或使用模板函数从指令属性中进行设置。

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

具体来说，设置template: templateFactory，然后只需将placeholder 放在指令标记中即可：

var templateFactory = function($el, attrs) {
  return '<input type="text" ng-model="model" placeholder="' + (attrs.placeholder || 'default placeholder') + '" />'
}

【讨论】：