Question

我有以下代码，请注意input字段上的名称有效和验证功能标记。

<form name="createForm" novalidate>
    <div style="display: flex; width: 300px">
        <div style="flex: 3;">
            Name
        </div>
        <div style="flex: 5;">
            <input type="text" name="listName" ng-model="newListName" 
            ng-minlength="3" name-valid validation-function="someFunction"/>
        </div>
    </div>
    <div ng-show="createForm.listName.$error.unique &&
                  !renameGoldenForm.listName.$error.minlength">already exists</div>
    <div ng-show="createForm.listName.$error.minlength">too short</div>
    <div style="margin-top: 10px">
        <button ng-click="createList()" ng-disabled="createForm.listName.$invalid">
         Create</button>
    </div>
</form>

这是JS：

window.angular.module("myModule").directive("nameValid", [
    "$log",
    function($log) {
        return {
            require: "ngModel",
            scope: {
                validationFunction: "="
            },
            link: function(scope, ele, attrs, c) {
                scope.$watch(attrs.ngModel, function() {
                    var v = scope[attrs.ngModel];
                    if (!v || !((v).trim()) || v.length < 4) {
                       c.$setValidity("unique", true);
                       c.$setValidity("minlength", false);
                        return;
                    }
                    scope.validationFunction(v, scope.selectedListId)
                        .success(function(data) {
                            c.$setValidity("unique", data.unique);
                            c.$setValidity("minlength", data.minlength);
                        });
                });
            }
        };
    }
]);

问题在于需求和范围似乎已经破裂。有没有办法将自定义验证功能传递给我的指令？我不确定该如何去做。我已尝试删除require: 'ngModel'并在ngModel中添加scope，但这也无效。如果我删除scope并对监视块中的函数进行硬编码，那么这很有效，但很明显，这会使得指向特定函数的目的失败。

Answer 1

要将控制器函数绑定到指令，必须使用&绑定（表达式绑定），该绑定允许指令调用表达式或由DOM属性定义的函数。

例如：

<强>控制器

(function(){

function Controller($scope, $q) {

  //Declare the func which will be bind to the directive
  $scope.func = function (data1, data2) {
    return new $q(function(resolve){
      resolve(data1 === data2);
    });
   }

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

然后我们将此函数绑定到您的指令中，我们可以将其调用到link函数中。

<强>指令

(function(){

  function directive() {
      return{
        restrict: 'AE',
        scope: {
          function: '&'
        },
        link:function(scope, element, attrs) {
          //Then, pass an object as argument to your function
          var promise = scope.function({data1: 5, data2: 5});

          //Retrieve result
          promise.then(function(data){
            console.log(data);
          });
        }
      };
  }

angular
  .module('app')
  .directive('directive', directive);

})();

要完成，您可以使用函数属性调用您的指令，以便将函数绑定到您的指令。

<强> HTML

  <body ng-app="app" ng-controller="ctrl">

      <directive function="func(data1, data2)"></directive>

 </body>

将函数传递给Angular验证指令

1 个答案: