Question

我的问题如下：我想写一个像这样工作的自定义指令：

<input type="text" ng-model="prefix" prettified="angular.lowercase">
<input type="text" ng-model="firstName" prettified="capitalize">
<input type="text" ng-model="abbreviation" prettified="addDot">

其中capitalize是范围的函数：

$scope.capitalize = function(value) {
  return capitalizedValue;
}

但attrs.prettified似乎在指令中始终被解释为字符串。我怎么能改变它？

更新

指令如下所示：

.directive('prettified', function () {
      return {
        require: 'ngModel',
        restrict: 'A',
        scope: {
          prettified: '&'
        },
        link: function (scope, element, attrs, ngModel) {

          ngModel.$formatters.push(attrs.prettified);
        }
      };
    });

更新2

我希望随视图更改模型。

Answer 1

您$scope.capitalize应该可以通过scope.prettified获取，而不是属性。

Answer 2

为什么不使用过滤器？

myApp.filter('capitalize', function() {
    return function(input) {
        //do whatever you want to do with input
        var str = input.split('');
        str[0].toUpperCase();
        str.join('');
        return str;
    }
});
myApp.filter('lowerCase', function() {
    return function(input) {
        //do whatever you want to do with input
        input = ...
        return input;
    }
});
myApp.filter('addDot', function() {
    return function(input) {
        //do whatever you want to do with input
        input = ...
        return input;
    }
});

在您的视图中，您可以使用过滤器，如：

<input type="text" ng-model="prefix | lowerCase" >
<input type="text" ng-model="firstName | cappitalize">
<input type="text" ng-model="abbreviation | addDot">

你可以使用过滤器做更多的事情，它是AngularJS非常强大的资源。

有关过滤器的详细信息，请查看文档 https://docs.angularjs.org/api/ng/filter/filter

此视频也是如此： https://egghead.io/lessons/angularjs-filters

事实上，我会推荐所有egghead.io视频。他们确实非常有帮助。

我可以将函数对象传递给angular指令吗？

2 个答案: