Question

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

我们的想法是拥有一个模板，该模板可以为不同的文本输入标记提供不同的占位符。有没有办法做到这一点？

我正在考虑从正在观看的输入文本中获取模型，然后对其执行某些操作，但这不会帮助我设置占位符并初始化输入文本字段。

Answer 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') + '" />'
}

Angular js创建通用指令

1 个答案: