Question

我正在尝试包装表单创建，以便在运行其他指令之前输入一些逻辑，例如ui.mask和ui.bootstrap。但是我无法执行这些其他指令。 HTML已经转换，但没有链接。

<div class="form-group" ng-repeat="field in headers.fields | filter: {editable: true}">
      <label for="{{field.name}}" class="col-sm-4 control-label">{{field.label}}</label>
      <div class="col-sm-7">
        <input ng-show="field.autocomplete === false"
               type="text"
               fw-input

               id="{{field.name}}"
               ng-model="data[field.name]" class="form-control" />
</div>
</div>

以下是我的指令的样子：

fwInput.$inject = ['viaCEP', '$timeout', '$compile'];
  function fwInput (viaCEP, $timeout, $compile) {
return {
  restrict: 'A',
  //terminal: true,
  // replace: true,
  //priority: 1,
  //scope: true,
  //transclude: true,
  //require: 'ngModel',
  link: {
     pre: function preLink(scope, $el, attrs, controller) {
       if (scope.field.customOptions.cep != undefined) {
         // console.log(scope);

         $el.blur(function() {
           var $scope = angular.element(this).scope();
           viaCEP.get(this.value).then(function(response){
             var map = $scope.field.customOptions.cep;

             $scope.$parent.detail_data[map.address] = response.logradouro;
             $scope.$parent.detail_data[map.district] = response.bairro;
             $scope.$parent.detail_data[map.city] = response.localidade;
             $scope.$parent.detail_data[map.state] = response.uf;
           });
         });
       }
       else if (scope.field.customOptions.cpf != undefined) {
         attrs.$set('ui-mask', "999.999.999-99");
         attrs.$set('ng-cpf')

         // $compile($el)(scope);

         // $compile($el)(scope);
         // ng-cpf ui-mask="999.999.999-99"
       }
       else if (scope.field.type == 'date') {
         attrs.$set('my-datepicker');

       }

       console.log('link pre');
     },
     post: function postLink(scope, $el, attrs, controller) {
     }
  }
}
  }

我已经尝试了一些替代方案，包括编译，优先级，终端。当我使用compile时，如果我编译（$ el）（范围）它会进入无限循环，如果我使用优先级，那么某些模型不会被绑定。

我也尝试用ng-attr- *来实现它，但我也遇到了麻烦。

有可能实现吗？如果没有，有没有办法直接绑定它，就像我用jQuery一样？

无法包装指令angular 1.4.1

0 个答案: