Question

我有一个角度指令：

app.directive('myDirective', function()
{
  return{
    restrict: 'AE',
    scope: {
        myCustomer: "&"
    },
    require: 'ngModel',
    link: function(scope, element, attr, ngModel){
        var oldVal;
        function fromUser(value){
            scope.myCustomer()(value, oldVal);
            oldVal = value;
            return value;
        }

        function toUser(value){
            return value;
        }

        ngModel.$parsers.push(fromUser);

        ngModel.$formatters.push(toUser);
    }
  }
}

目前我通过使用属性名称调用此导演并将其绑定到函数：

 <input type="text" my-directive="showInput" ng-model="user.name">

它工作正常，但我想要的是使用元素名称，如下所示：

<my-directive>

问题是我不知道如何绑定到函数，就像我对属性一样。

Answer 1

您需要设置＆＃39;限制＆＃39;到了E＆＃39;在您的指令定义中，如：

        bindToController: true,
        controller: 'YourController',
        controllerAs: 'vm',
        restrict: 'E', //<----this is what you want
        templateUrl: 'template.html'

Answer 2

你必须通过限制：＆＃39; E＆＃39;在指令选项

angular.module("image-management")
    .directive('myDirective', ($modal) => {

        return {
            restrict: 'E',
            scope:{
              showInput: '&'  
            },
            template: '',
            link: function(){}
})   

    <my-directive showInput="showInput" ></my-directive>

Answer 3

<my-directive some-function="someFunction"></my-directive>

然后在您的指令link函数中，可以通过attr

访问它

link: function(scope, element, attr, ngModel){
    // Your logic...
    attr.someFunction();
}

Answer 4

@sumair回答说，你可以这样做：

<my-directive showInput="showInput" ></my-directive>

但是，如果你真的只想使用

<my-directive>

并且您的指令不需要具有隔离范围，您可以保留指令定义的scope属性并直接从继承范围引用您的showInput函数，如下所示：

app.directive('myDirective', function()
{
  return{
    restrict: 'AE',
    /*scope: { ////// remove this part //////
        myCustomer: "&"
    },*/
    require: 'ngModel',
    link: function(scope, element, attr, ngModel){
        var oldVal;
        function fromUser(value){
            scope.showInput()(value, oldVal);
            oldVal = value;
            return value;
        }

        function toUser(value){
            return value;
        }

        ngModel.$parsers.push(fromUser);

        ngModel.$formatters.push(toUser);
    }
  }
}

如何使用元素名称调用指令？

4 个答案: