如何将自定义指令属性传递给 Angular 1.5 中的自定义指令子元素？

Question

我目前正在尝试将验证指令传递给自定义元素指令。但是我正在努力让它工作，因为当我使用绑定到控制器时它应该接收模型作为输入。

我必须以无法升级到更新版本的 Angular 为前提，因此 1.5 是限制，而且我无法编辑验证指令。我认为 transclude 会有所帮助，但使用指令属性看起来不太有前途。以下代码应该做的是在输入元素上验证 vm.model。

这是HTML：

  <body ng-controller="MainCtrl">
    <div class="myClass">
      <my-custom-directive data-placeholder="No text"
                           data-id="myModel.id"
                           data-model="myModel.text" 
                           not-editable-directive-attribute >
      </my-custom-directive>
    </div>
  </body>

这里是 app.js:

var myTemplate = '<div class="myContainer">' +
  '<input class="myInput"' +
  '       ng-mousedown="$event.stopPropagation();"' +
  '       ng-show="vm.isFocused"' +
  '       ng-model="vm.model"' +
  '       ng-change="vm.onChange()"' +
  '       type="text">' +
  '<span ng-show="!vm.isFocused">{{vm.model}}</span>' +
  '<span ng-show="!vm.isFocused && !vm.model && vm.placeholder">{{vm.placeholder}}</span>' +
  '</div>';

app.controller('MainCtrl', function($scope) {
  $scope.myModel = {
    id: 'test',
    text: 'this is text'
  };
});

app.directive('myCustomDirective', ['$timeout', function($timeout) {
  return {
    restrict: 'E',
    replace: true,
    template: myTemplate,
    controllerAs: 'vm',
    bindToController: {
      id: '@',
      model: '=',
      onChange: '&',
      placeholder: '@'
    },
    scope: {},
    controller: angular.noop,
    link: function(scope, element) {
      var input = element.find('input')[0];
      var spans = Array.from(element.find('span'));

      var vm = scope.vm;
      vm.isFocused = false;

      vm.focus = function() {
        vm.isFocused = true;
        scope.$applyAsync(function() {
          $timeout(function() {
            input.focus();
            input.select();
          });
        });
      };

      spans.forEach(span => span.addEventListener('click', vm.focus));
    }
  };
}]);

app.directive('notEditableDirectiveAttribute', [function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl) {
      ctrl.$validators.myCustomDirectiveAttribute = function(modelValue, viewValue) {
        if (viewValue) {
          return viewValue.indexOf('e') < 0;
        }

        return false;
      };
    }
  };
}]);

我创建了一个 plunker 以使其更清楚： http://plnkr.co/edit/auminr?p=preview

所以点击 span 元素我应该能够编辑文本和指令应该验证它（在这种特定情况下检查它是否包含字母 "e"）。

有没有可能或者我正在与风车作斗争？

Answer 1

根据组件属性向模板添加指令的一种方法是使用模板的函数形式属性:

<my-custom-directive data-placeholder="No text"
                     model="vm.data" 
                     custom="not-editable-directive-attribute" >
</my-custom-directive>

app.directive("myCustomDirective", function() {
    return {
        template: createTemplate,
        scope: {},
        //...
    });
    function createTemplate(tElem, tAttrs) {
        var placeholder = tAttrs.placeholder;
        var model = tAttrs.model;
        var custom = tAttrs.custom;
        return `
            <input placeholder=${placeholder}
                   ng-model=${model}
                   ${custom} />
        `;
    }
})

createTemplate 函数复制属性并在模板文字中使用它们。

有关详细信息，请参阅

如何将自定义指令属性传递给 Angular 1.5 中的自定义指令子元素？

How to pass a custom directive attribute to custom directive child element in Angular 1.5?

javascript

angularjs

angularjs-directive