如何將自定義指令屬性傳遞給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;
      };
    }
  };
}]);

我創建了一個更加清晰的插件： 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中的自定義指令子元素？

問題描述

1 個解決方案

解決方案1
0 已采納 2019-01-08 23:39:39

如何將自定義指令屬性傳遞給Angular 1.5中的自定義指令子元素？

問題描述

1 個解決方案

解決方案1 0 已采納 2019-01-08 23:39:39

解決方案1
0 已采納 2019-01-08 23:39:39